Successfully reported this slideshow.
Your SlideShare is downloading. ×

El color en la web: teoría y accesibilidad

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 65 Ad

El color en la web: teoría y accesibilidad

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

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

×