Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

El color en la web: teoría y accesibilidad

1,061 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

El color en la web: teoría y accesibilidad

  1. 1. EL COLOR EN LA WEB TEORÍA Y ACCESIBILIDAD @PICCIA
  2. 2. NO SOLO POR SER BONITOS. PARA QUÉ SIRVEN LOS COLORES? @PICCIA
  3. 3. LOS COLORES NOS AYUDAN A RECONOCER LOS OBJETOS Y SU FUNCIÓN LOS COLORES INDICAN FUNCIÓN. @PICCIA
  4. 4. @PICCIA
  5. 5. LOS COLORES GRITAN: NO ME COMAS, O HAZ EL AMOR CONMIGO LOS COLORES NOS ALERTAN Y ACONSEJAN @PICCIA
  6. 6. NO SOLO PARA HACER LAS COSAS MÁS BONITAS. LOS COLORES NOS AYUDAN A NAVEGAR LA VIDA, ADEMÁS DE LA WEB. @PICCIA
  7. 7. 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
  8. 8. LA LUZ ES LA VIDA DE LOS COLORES. LOS COLORES VIVEN EN LA LUZ. @PICCIA
  9. 9. @PICCIA
  10. 10. @PICCIA
  11. 11. @PICCIA
  12. 12. @PICCIA
  13. 13. SI NO HAY LUZ NO HAY COLOR. LOS COLORES NO EXISTEN SIN LUZ. @PICCIA
  14. 14. SÍNTESIS ADITIVA BLANCO= TODOS LOS COLORES; NEGRO = AUSENCIA DE LUZ RGB @PICCIA
  15. 15. SÍNTESIS SUSTRACTIVA NEGRO = TODOS LOS COLORES; BLANCO = AUSENCIA DE PIGMENTO @PICCIA
  16. 16. SÍNTESIS SUSTRACTIVA – RYB @PICCIA
  17. 17. SÍNTESIS ADITIVA – RGB @PICCIA
  18. 18. EL GAMUT RGB INCLUYE CASI 17 MILLONES DE COLORES. 256X 256X 256= 16.777.216 COLOURS @PICCIA
  19. 19. @PICCIA
  20. 20. @PICCIA
  21. 21. @PICCIA
  22. 22. @PICCIA
  23. 23. CÍRCULO CROMÁTICO Y ARMONÍA @PICCIA
  24. 24. COLORES COMPLEMENTARIOS @PICCIA
  25. 25. COLORES COMPLEMENTARIOS @PICCIA
  26. 26. COLORES COMPLEMENTARIOS @PICCIA
  27. 27. NO LO HAGAS. @PICCIA
  28. 28. EN SERIO, NO @PICCIA
  29. 29. POR FAVOR… NO! @PICCIA
  30. 30. @PICCIA© Riccardo Falcinelli –Cromorama
  31. 31. PÓSTUMO COMPLEMENTARIO @PICCIA Riccardo Falcinelli –Cromorama
  32. 32. LA PERCEPCIÓN DEL COLOR DEPENDE DE MUCHOS FACTORES. EL COLOR ES UNA OPINIÓN. @PICCIA
  33. 33. AZUL O BLANCO? @PICCIA
  34. 34. NEGRO O BLANCO? @PICCIA
  35. 35. ROSA O GRIS? @PICCIA
  36. 36. LA VERDAD ABSOLUTA NO EXISTE CON LOS COLORES. CUALQUIER VISIÓN DE LOS COLORES ES IGUAL DE VALIDA. @PICCIA
  37. 37. NUESTRA ELECCIÓN DE COLORES DEBE SIEMPRE SER ACCESIBLE. NO SE PUEDEN ELEGIR LOS COLORES POR PREFERENCIA PERSONAL. @PICCIA
  38. 38. 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
  39. 39. ALTERACIONES DE LA PERCEPCIÓN DEL COLOR. ▸ Protanopia ▸ Deuteranopia ▸ Tritanopia ▸ Protanomalia ▸ Deuteranomalia ▸ Tritanomalia ▸ Achromatopsia @PICCIA
  40. 40. 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
  41. 41. EL SISTEMA HSB HUE/ TONO SATURATION/ SATURACIÓN BRIGHTNESS/ LUMINOSIDAD @PICCIA
  42. 42. TONO = COLOR DEL ARCO IRIS 00 300 600 900 1200 1500 1800 2100 2400 2700 3000 3300 @PICCIA
  43. 43. LAS CEGUERAS AL COLOR DEPENDEN DEL TONO. NO TE FIES DEL TONO. @PICCIA
  44. 44. HSB @PICCIA
  45. 45. 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
  46. 46. PALETA SATURACIÓN @PICCIA
  47. 47. 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
  48. 48. LUMINOSIDAD @PICCIA
  49. 49. HAZ UN TEST PARA LA CEGUERA AL COLOR ENCHROMA.COM @PICCIA
  50. 50. @PICCIA
  51. 51. HAY QUE TESTAR NUESTRAS PALETAS PARA ACCESIBILIDAD COOLORS.CO @PICCIA
  52. 52. @PICCIA
  53. 53. @PICCIA
  54. 54. @PICCIA
  55. 55. @PICCIA
  56. 56. CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD TOPTAL.COM @PICCIA
  57. 57. @PICCIA
  58. 58. CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD COLOURBLIND – DALTON @PICCIA
  59. 59. CÓMO TESTAR TEXTO Y FONDOS PARA ACCESIBILIDAD COLORABLE @PICCIA
  60. 60. @PICCIA
  61. 61. UNA WEB ACCESIBLE ES UNA WEB LEGAL. HAZ QUE TUS WEBS SEAN ACCESIBLES. @PICCIA
  62. 62. @PICCIA PICCIA NERI PICCIA NERI WP FACEBOOK.COM/GROUPS/DESIGNFORGEEKS/ HTTPS://DESIGNFORGEEKS.COM PICCIA@PICCIANERI.COM GRACIAS @PICCIA NERI

×