Charla para WordCamp Valencia 2018. Un poco de teoría del color, unas imágenes que dividen las opiniones, y un par de métodos sobre cómo crear paletas seguras y accesible de forma muy sencilla.

1. EL COLOR EN LA WEB
TEORÍA Y ACCESIBILIDAD
@PICCIA

2. NO SOLO POR SER BONITOS.
PARA QUÉ SIRVEN
LOS COLORES?
@PICCIA

3. LOS COLORES NOS AYUDAN A RECONOCER LOS OBJETOS Y SU FUNCIÓN
LOS COLORES INDICAN
FUNCIÓN.
@PICCIA

4. @PICCIA

6. LOS COLORES GRITAN: NO ME COMAS, O HAZ EL AMOR CONMIGO
LOS COLORES NOS
ALERTAN Y ACONSEJAN
@PICCIA

9. NO SOLO PARA HACER LAS COSAS MÁS BONITAS.
LOS COLORES NOS
AYUDAN A NAVEGAR LA
VIDA, ADEMÁS DE LA WEB.
@PICCIA

10. LOS COLORES EN LA VIDA REAL SON DIFERENTES DE LOS COLORES EN LA WEB.
LOS COLORES SON
DIFERENTES EN LA
VIDA REAL Y EN LA WEB.
@PICCIA

11. LA LUZ ES LA VIDA DE LOS COLORES.
LOS COLORES VIVEN
EN LA LUZ.
@PICCIA

12. @PICCIA

13. @PICCIA

14. @PICCIA

15. @PICCIA

16. SI NO HAY LUZ NO HAY COLOR.
LOS COLORES NO
EXISTEN SIN LUZ.
@PICCIA

17. SÍNTESIS ADITIVA BLANCO= TODOS LOS COLORES;
NEGRO = AUSENCIA DE LUZ
RGB
@PICCIA

18. SÍNTESIS SUSTRACTIVA NEGRO = TODOS LOS COLORES;
BLANCO = AUSENCIA DE PIGMENTO
@PICCIA

19. SÍNTESIS SUSTRACTIVA – RYB @PICCIA

20. SÍNTESIS ADITIVA – RGB @PICCIA

21. EL GAMUT RGB INCLUYE CASI 17 MILLONES DE COLORES.
256X
256X
256=
16.777.216 COLOURS
@PICCIA

22. @PICCIA

23. @PICCIA

24. @PICCIA

25. @PICCIA

26. CÍRCULO CROMÁTICO Y ARMONÍA @PICCIA

27. COLORES COMPLEMENTARIOS @PICCIA

28. COLORES COMPLEMENTARIOS @PICCIA

29. COLORES COMPLEMENTARIOS @PICCIA

30. NO LO HAGAS. @PICCIA

31. EN SERIO, NO @PICCIA

32. POR FAVOR… NO! @PICCIA

33. @PICCIA© Riccardo Falcinelli –Cromorama

34. PÓSTUMO COMPLEMENTARIO
@PICCIA
Riccardo Falcinelli –Cromorama

35. LA PERCEPCIÓN DEL COLOR DEPENDE DE MUCHOS FACTORES.
EL COLOR
ES UNA OPINIÓN.
@PICCIA

36. AZUL O BLANCO? @PICCIA

37. NEGRO O BLANCO? @PICCIA

38. ROSA O GRIS? @PICCIA

39. LA VERDAD ABSOLUTA NO EXISTE CON LOS COLORES.
CUALQUIER VISIÓN DE
LOS COLORES ES IGUAL
DE VALIDA.
@PICCIA

40. NUESTRA ELECCIÓN DE COLORES DEBE SIEMPRE SER ACCESIBLE.
NO SE PUEDEN ELEGIR
LOS COLORES POR
PREFERENCIA PERSONAL.
@PICCIA

41. LA CEGUERA AL COLOR A MENUDO SE DESCONOCE.
EL 8% DE HOMBRES Y
EL 0,5% DE MUJERES
TIENEN ALGUNA FORMA
DE CEGUERA AL COLOR
@PICCIA

42. ALTERACIONES DE LA PERCEPCIÓN DEL COLOR.
▸ Protanopia
▸ Deuteranopia
▸ Tritanopia
▸ Protanomalia
▸ Deuteranomalia
▸ Tritanomalia
▸ Achromatopsia
@PICCIA

43. ASEGÚRATE DE QUE TU UI SEA VISIBLE AND CLEAR TO PARA TODOS.
CÓMO CREAR UNA
PALETA SIMPLE, SEGURA
Y ACCESIBLE PARA
NUESTRA UI.
@PICCIA

44. EL SISTEMA HSB
HUE/ TONO
SATURATION/ SATURACIÓN
BRIGHTNESS/ LUMINOSIDAD
@PICCIA

45. TONO = COLOR DEL ARCO IRIS
00
300
600
900
1200
1500
1800
2100
2400
2700
3000
3300
@PICCIA

46. LAS CEGUERAS AL COLOR DEPENDEN DEL TONO.
NO TE FIES DEL TONO.
@PICCIA

47. HSB @PICCIA

48. SATURACIÓN
S=100% S=80% S=60% S=40% S=20% S=10%
PODEMOS CREAR PALETAS PARA NUESTRA UI
VARIANDO LA SATURACIÓN
@PICCIA

49. PALETA SATURACIÓN @PICCIA

50. LUMINOSIDAD
B=100% B=80% B=60% B=40% B=20% B=0%
B=100% B=80% B=60% B=40% B=20% B=0%
@PICCIA

51. LUMINOSIDAD @PICCIA

52. HAZ UN TEST PARA LA CEGUERA AL COLOR
ENCHROMA.COM
@PICCIA

53. @PICCIA

54. HAY QUE TESTAR NUESTRAS PALETAS PARA ACCESIBILIDAD
COOLORS.CO
@PICCIA

55. @PICCIA

56. @PICCIA

57. @PICCIA

58. @PICCIA

59. CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD
TOPTAL.COM
@PICCIA

60. @PICCIA

61. CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD
COLOURBLIND –
DALTON
@PICCIA

62. CÓMO TESTAR TEXTO Y FONDOS PARA ACCESIBILIDAD
COLORABLE
@PICCIA

63. @PICCIA

64. UNA WEB ACCESIBLE ES UNA WEB LEGAL.
HAZ QUE TUS WEBS
SEAN ACCESIBLES.
@PICCIA

65. @PICCIA PICCIA NERI PICCIA NERI WP
FACEBOOK.COM/GROUPS/DESIGNFORGEEKS/
HTTPS://DESIGNFORGEEKS.COM
PICCIA@PICCIANERI.COM
GRACIAS
@PICCIA NERI