SlideShare a Scribd company logo
1 of 65
Download to read offline
EL COLOR EN LA WEB
TEORÍA Y ACCESIBILIDAD
@PICCIA
NO SOLO POR SER BONITOS.
PARA QUÉ SIRVEN
LOS COLORES?
@PICCIA
LOS COLORES NOS AYUDAN A RECONOCER LOS OBJETOS Y SU FUNCIÓN
LOS COLORES INDICAN
FUNCIÓN.
@PICCIA
@PICCIA
LOS COLORES GRITAN: NO ME COMAS, O HAZ EL AMOR CONMIGO
LOS COLORES NOS
ALERTAN Y ACONSEJAN
@PICCIA
NO SOLO PARA HACER LAS COSAS MÁS BONITAS.
LOS COLORES NOS
AYUDAN A NAVEGAR LA
VIDA, ADEMÁS DE LA WEB.
@PICCIA
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
LA LUZ ES LA VIDA DE LOS COLORES.
LOS COLORES VIVEN
EN LA LUZ.
@PICCIA
@PICCIA
@PICCIA
@PICCIA
@PICCIA
SI NO HAY LUZ NO HAY COLOR.
LOS COLORES NO
EXISTEN SIN LUZ.
@PICCIA
SÍNTESIS ADITIVA BLANCO= TODOS LOS COLORES;
NEGRO = AUSENCIA DE LUZ
RGB
@PICCIA
SÍNTESIS SUSTRACTIVA NEGRO = TODOS LOS COLORES;
BLANCO = AUSENCIA DE PIGMENTO
@PICCIA
SÍNTESIS SUSTRACTIVA – RYB @PICCIA
SÍNTESIS ADITIVA – RGB @PICCIA
EL GAMUT RGB INCLUYE CASI 17 MILLONES DE COLORES.
256X
256X
256=
16.777.216 COLOURS
@PICCIA
@PICCIA
@PICCIA
@PICCIA
@PICCIA
CÍRCULO CROMÁTICO Y ARMONÍA @PICCIA
COLORES COMPLEMENTARIOS @PICCIA
COLORES COMPLEMENTARIOS @PICCIA
COLORES COMPLEMENTARIOS @PICCIA
NO LO HAGAS. @PICCIA
EN SERIO, NO @PICCIA
POR FAVOR… NO! @PICCIA
@PICCIA© Riccardo Falcinelli –Cromorama
PÓSTUMO COMPLEMENTARIO
@PICCIA
Riccardo Falcinelli –Cromorama
LA PERCEPCIÓN DEL COLOR DEPENDE DE MUCHOS FACTORES.
EL COLOR
ES UNA OPINIÓN.
@PICCIA
AZUL O BLANCO? @PICCIA
NEGRO O BLANCO? @PICCIA
ROSA O GRIS? @PICCIA
LA VERDAD ABSOLUTA NO EXISTE CON LOS COLORES.
CUALQUIER VISIÓN DE
LOS COLORES ES IGUAL
DE VALIDA.
@PICCIA
NUESTRA ELECCIÓN DE COLORES DEBE SIEMPRE SER ACCESIBLE.
NO SE PUEDEN ELEGIR
LOS COLORES POR
PREFERENCIA PERSONAL.
@PICCIA
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
ALTERACIONES DE LA PERCEPCIÓN DEL COLOR.
▸ Protanopia
▸ Deuteranopia
▸ Tritanopia
▸ Protanomalia
▸ Deuteranomalia
▸ Tritanomalia
▸ Achromatopsia
@PICCIA
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
EL SISTEMA HSB
HUE/ TONO
SATURATION/ SATURACIÓN
BRIGHTNESS/ LUMINOSIDAD
@PICCIA
TONO = COLOR DEL ARCO IRIS
00
300
600
900
1200
1500
1800
2100
2400
2700
3000
3300
@PICCIA
LAS CEGUERAS AL COLOR DEPENDEN DEL TONO.
NO TE FIES DEL TONO.
@PICCIA
HSB @PICCIA
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
PALETA SATURACIÓN @PICCIA
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
LUMINOSIDAD @PICCIA
HAZ UN TEST PARA LA CEGUERA AL COLOR
ENCHROMA.COM
@PICCIA
@PICCIA
HAY QUE TESTAR NUESTRAS PALETAS PARA ACCESIBILIDAD
COOLORS.CO
@PICCIA
@PICCIA
@PICCIA
@PICCIA
@PICCIA
CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD
TOPTAL.COM
@PICCIA
@PICCIA
CÓMO TESTAR PÁGINAS PARA ACCESIBILIDAD
COLOURBLIND –
DALTON
@PICCIA
CÓMO TESTAR TEXTO Y FONDOS PARA ACCESIBILIDAD
COLORABLE
@PICCIA
@PICCIA
UNA WEB ACCESIBLE ES UNA WEB LEGAL.
HAZ QUE TUS WEBS
SEAN ACCESIBLES.
@PICCIA
@PICCIA PICCIA NERI PICCIA NERI WP
FACEBOOK.COM/GROUPS/DESIGNFORGEEKS/
HTTPS://DESIGNFORGEEKS.COM
PICCIA@PICCIANERI.COM
GRACIAS
@PICCIA NERI

More Related Content

Similar to El color en la web: teoría y accesibilidad

Similar to El color en la web: teoría y accesibilidad (15)

Le nouvelle
Le nouvelleLe nouvelle
Le nouvelle
 
Una correcta actitud la llave para la plenitud ii
Una correcta actitud la llave para la plenitud iiUna correcta actitud la llave para la plenitud ii
Una correcta actitud la llave para la plenitud ii
 
Arte de los Colores
Arte de los ColoresArte de los Colores
Arte de los Colores
 
Patricio pachacama act. 2.1
Patricio pachacama act. 2.1Patricio pachacama act. 2.1
Patricio pachacama act. 2.1
 
Slogans and migration
Slogans and migrationSlogans and migration
Slogans and migration
 
Spain - Slogans and migration
Spain - Slogans and migrationSpain - Slogans and migration
Spain - Slogans and migration
 
Spain - Slogans and migration
Spain - Slogans and migrationSpain - Slogans and migration
Spain - Slogans and migration
 
Bloque 3
Bloque 3Bloque 3
Bloque 3
 
Bloque 3
Bloque 3Bloque 3
Bloque 3
 
CLASIFICACION DEL COLOR
CLASIFICACION DEL COLOR CLASIFICACION DEL COLOR
CLASIFICACION DEL COLOR
 
T1 giomara y stalin teoria del color
T1 giomara y stalin teoria del colorT1 giomara y stalin teoria del color
T1 giomara y stalin teoria del color
 
clasificación del color
clasificación del color clasificación del color
clasificación del color
 
clases para 1er grado
clases para 1er gradoclases para 1er grado
clases para 1er grado
 
Tu mundo, mi mundo
Tu mundo, mi mundoTu mundo, mi mundo
Tu mundo, mi mundo
 
Teoria del color
Teoria del colorTeoria del color
Teoria del color
 

Recently uploaded

Facultad Nacional de Ingeniería caratula.docx
Facultad Nacional de Ingeniería caratula.docxFacultad Nacional de Ingeniería caratula.docx
Facultad Nacional de Ingeniería caratula.docxNellyMamani14
 
diapositiva para tus fondos de power point
diapositiva para tus fondos de power pointdiapositiva para tus fondos de power point
diapositiva para tus fondos de power pointlady151
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearNoemiCARABAJAL
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfYesiRoh
 
diapositiva aesthetic para tus fondos de power point
diapositiva aesthetic para tus fondos de power pointdiapositiva aesthetic para tus fondos de power point
diapositiva aesthetic para tus fondos de power pointlady151
 
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...octavio
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfFlorMezones
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................RebecaVera12
 
Bandera Diaguita emblema de la union.pptx
Bandera Diaguita emblema de la union.pptxBandera Diaguita emblema de la union.pptx
Bandera Diaguita emblema de la union.pptxDanielChoquis
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdfcpachecot
 
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024CristobalHeraud
 
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdf
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdfPORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdf
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdfCristobalHeraud
 

Recently uploaded (12)

Facultad Nacional de Ingeniería caratula.docx
Facultad Nacional de Ingeniería caratula.docxFacultad Nacional de Ingeniería caratula.docx
Facultad Nacional de Ingeniería caratula.docx
 
diapositiva para tus fondos de power point
diapositiva para tus fondos de power pointdiapositiva para tus fondos de power point
diapositiva para tus fondos de power point
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorear
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdf
 
diapositiva aesthetic para tus fondos de power point
diapositiva aesthetic para tus fondos de power pointdiapositiva aesthetic para tus fondos de power point
diapositiva aesthetic para tus fondos de power point
 
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...
toaz.info-torre-barlovento-revista-constructivo-pr_bdacd85f8504c63f69352ff3a6...
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................
 
Bandera Diaguita emblema de la union.pptx
Bandera Diaguita emblema de la union.pptxBandera Diaguita emblema de la union.pptx
Bandera Diaguita emblema de la union.pptx
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
 
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024
PORTAFOLIO DE ARQUITECTURA - CRISTOBAL HERAUD 2024
 
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdf
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdfPORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdf
PORTAFOLIO ACADÉMICO CRISTOBAL HERAUD -2024.pdf
 

El color en la web: teoría y accesibilidad