WCAG Contrast Checker
Check color contrast against WCAG standards.
Large sample text
This is regular sample text used to verify color contrast under WCAG 2.1.
Small text to check readability at reduced sizes.
Contrast ratio
7.00:1
AA Normal text
Passes
minimum 4.5:1
AAA Normal text
Passes
minimum 7:1
AA Large text
Passes
minimum 3:1
AAA Large text
Passes
minimum 4.5:1
WCAG color contrast accessibility checker
WCAG establishes minimum contrast requirements between text and background to ensure content is readable for all people, including those with visual impairments. Meeting these requirements improves accessibility and is a legal requirement in many countries.
WCAG defines two levels: AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text). The ratio is calculated comparing relative luminance.
Our tool calculates the contrast ratio in real time, shows a preview with different text sizes, and suggests the closest compliant color if the combination fails AA level. Essential for web designers and frontend developers.
Frequently asked questions
What is the WCAG contrast ratio?
It is a numerical measure of the luminosity difference between two colors, expressed as X:1. A ratio of 1:1 means the colors are identical (no contrast), while 21:1 is the maximum possible (black on white). It is calculated using the relative luminance of each color according to the W3C formula.
Should I meet AA or AAA?
Level AA is the recommended standard and is legally required in many contexts. AAA is the ideal level but harder to achieve in all cases. For most websites, meeting AA is sufficient and mandatory. AAA is especially recommended for government and health content.
What is considered "large text"?
According to WCAG, large text is text with a size of at least 18pt (24px) or 14pt (18.66px) in bold. Large text has less strict contrast requirements because it is inherently easier to read.
Want to learn more? Read our complete guide →