josephluck / pa11y

🌈 A web tool to check whether your color scheme is a11y / WCAG compliant.

🌈

pa11y

A web tool to check whether your color scheme is a11y / WCAG compliant.

https://pa11y.josephluck.now.sh/

Research

• WCAG contrast ratio guidelines: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G183

• WCAG contrast ratio explanation: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

• Calculating contrast ratio: https://www.w3.org/TR/WCAG20/#contrast-ratiodef

• Calculating relative luminance: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

• Understanding colors and luminance: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance

• List of color tools: https://github.com/joomla/accessibility/blob/master/docs/tutorials/tools-color.md

Prior art

• Accessible color checking & suggestions: https://accessible-colors.com/

• Accessible contrast checker: https://contrastchecker.com/

• Contrast ratio checker: https://contrast-ratio.com/#green-on-red

• A11y color pair contrast testing: https://color.a11y.com/ContrastPair/?bgcolor=ffffff&fgcolor=000000

• Colorable: https://colorable.jxnblk.com/000f0c/00ffa2

• Accessible color palette builder: https://toolness.github.io/accessible-color-matrix/

• Accessible color palette builder: http://colorsafe.co/

• Color contrast checker: http://www.visionaustralia.org/services/digital-access/resources/colour-contrast-determinator

• Grid based a11y contrast checker: http://a11yrocks.com/colorPalette/