Aplicar escalas de grises a una imagen, se consigue mediante varias técnicas, pero
no tienen por que asociarse al uso de HTML5.
También hay dificultades en el uso de la propiedad filter de css, ya que Chrome y Safari, en sus versiones estándar no las reconocen.
Probablemente, uno de los mejores resultados se consigue con una script llamada grayscale.js, si bien se la suele asociar con un plugin de Jquery, no lo es.
En caso de imágenes muy grandes, hay que tener cuidado, porque el proceso puede crear delays (demoras) imprevistas.
Es compatible con IE7,8,9,Crhome, Opera, firefox y Safari.
En cuanto a la alternancia en el evento onclick, también se consigue con javascript.
Por supuesto, siempre queda una solución más elemental, que es de disponer de dos imágenes, y hacer una simple substitución.
Demo
http://foros.emprear.com/css/bgcolor_a_gris/
Saludos