Nuevo Algoritmo de color para webs accesibles

APCA

[{"selector":"#anim-c7831aca-568e-4fce-aaa0-c769985bcd7c","keyframes":{"transform":["translate3d(-145.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4aae6e68-f4a4-4a27-9ed1-bc0f055eafae","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f17489a-c194-4728-b61d-dc45c7cb4405","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-71689e46-919c-4147-abab-c4bade751c50","keyframes":{"transform":["translate3d(116.84210%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eb0cc9a3-b546-4636-bc43-ee7c960456db","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-79b4dcbf-f008-49eb-a483-c336fdcc1f2c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-8b71e2bd-3e18-4d0d-88cf-57724f447754","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-67fa423e-1aba-4111-956c-4c68342cd634","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

WCGA 3.0.

[{"selector":"#anim-1bc6d2ba-bca4-4dee-890e-7a32d7028550","keyframes":{"transform":["translate3d(-131.92983%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-df66f77e-64b7-48df-9924-d2dba086c617","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-efb48758-3a3e-4bf8-b3f4-f7294607d98a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-885778c9-fb28-4b16-a8ec-efc70ed49093","keyframes":{"transform":["translate3d(160.49999%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7557f549-cdf3-44f9-8022-2fa49dfcf9b8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f3153629-2f49-4048-8338-caebdc10fff8","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-01e9050a-6585-4354-9b75-5377061c56d5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bcd27084-a3de-43b3-baae-0ff2c01afd8a","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

percepción humana del contraste

[{"selector":"#anim-b0b5fc43-2052-4623-9589-5c7704cb17ae","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-8f380ea7-3f4f-4c56-96c0-67021db82771","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d1a78cb1-4aa9-4086-82d9-b2cb19e7a6ec","keyframes":{"transform":["translate3d(118.88889%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1608d132-b5e0-48ce-ae77-d11e1e54710f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56cd94fc-88ef-4735-81e9-8e7848fcea5c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-25f913c0-7cd7-4fd4-91ad-aa55730e061b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3e38ae1c-d059-4148-9373-ee138fe19965","keyframes":{"transform":["translate3d(-131.92983%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Valora mejor el contraste de fondo, color de texto y el tamaño o peso del mismo.

[{"selector":"#anim-267c5e14-4eeb-43af-8d73-2ab5d91026a5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b85aa5f9-9cce-44f5-acd0-466c826b52b9","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-4767b726-595e-438a-8b7a-6690c5737322","keyframes":{"transform":["translate3d(-131.92983%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-81c2c983-d0cf-484d-b5a4-c712043be85e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-563b6d07-cf33-4d8e-9446-ae4c259cc63c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

Puedes usarlo ya con las siguientes herramientas:

[{"selector":"#anim-94d7eee8-8a6e-41b6-9534-57e82afe1e42","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-245be075-c7a4-4001-a042-166c1bf1e01e","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-2c43859c-6511-44cb-92aa-a65ae0c5ee76","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b66d0b8-b6d8-4a62-8050-23fead198bc5","keyframes":{"transform":["translate3d(-131.92983%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96c2c50b-aff9-4bac-92c8-b514ed1aff16","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a0485a24-7d3b-460b-bf9a-5ccf8b79b33a","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a90dd23e-6e5a-48be-b1f9-48f7ecbe87ec","keyframes":{"opacity":[0,1]},"delay":900,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-055f0f62-cdd6-4794-8cc5-d1f72b3e0c15","keyframes":{"opacity":[0,1]},"delay":900,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7dfbf37a-035e-48fe-9507-4ae1fc2a9415","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-882fad1e-68e2-4d21-9f17-7da6a57648c1","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] APCA Contrast Calculator de Mundex Research. Contrast Tools. APCA Accesible Colour Palette.

Combina los algoritmos correctos y revisa los resultados.

[{"selector":"#anim-195ed094-d2d6-40f0-b269-a4b0dcb1fda4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-19e3fa21-57f2-4bf1-bf7d-4f89a3d6d495","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-53fd312d-6359-4967-82a6-65ec2d2e6333","keyframes":{"transform":["translate3d(-132.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-af0b2815-13a2-454b-84d1-709fe0492e32","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9d927d79-64b4-4937-aa6d-b01384bc65db","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}]

¿Quieres saber más?

[{"selector":"#anim-c18880d0-dde9-4797-9b86-ab4607779322","keyframes":{"transform":["translate3d(-132.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75a4964e-3d2d-436b-90a7-3808f9fd7537","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b3473d7-a417-4864-a881-a40cb2dc7070","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-7c678894-2d11-4c62-85ce-32fb79f5405b","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-0be753cc-eb13-48db-82b7-b5e3aa63299c","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-b380e8db-3ca0-4199-800b-d56a09ce50ea","keyframes":{"transform":["scale(1)","scale(1.5)","scale(0.95)","scale(1)"],"offset":[0,0.33,0.66,1]},"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":7}] www.tuwebaccesible.es

Nuevo Algoritmo de color para webs accesibles

APCA

Algoritmo de Contraste Perceptual Accesible

WCGA 3.0.

Está vinculado A la nueva versión de

percepción humana del contraste

Es más sofisticado y calcula mejor la

Valora mejor el contraste de fondo, color de texto y el tamaño o peso del mismo.

Puedes usarlo ya con las siguientes herramientas:

Combina los algoritmos correctos y revisa los resultados.

¿Quieres saber más?

TE AYUDAMOS