contrast-ratio

Contrast Ratio

Official version

A tool to calculate the WCAG (Web Content Accessibility Guidelines) contrast ratio of text on a web page.

WCAG define two levels of compliance that differ only in the contrast ratio:

Level AA:

• 4.5:1 for normal text
• 3:1 for large text
• 3:1 for graphics and user interface components (such as form input borders) Level AAA:
• 7:1 for normal text
• 4.5:1 for large text

Large text is defined as 14 point (typically 18.66px, or 1.2rem when the root font is 16px) and bold or larger, or 18 point (typically 24px or 1.5rem) or larger.

NOTE: this repo does not create the public website any longer. The code is used as the basis for the page at Siege Media.

Acknowledgements

• Lea Verou for initial concept and programming
• Seth Falco