Contrast Checker

Check if your foreground and background colors meet WCAG accessibility contrast requirements. Get AA and AAA compliance results with fix suggestions.

🎯 Check Contrast

12.73:1
Contrast Ratio
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Large text (24px) — Sample heading
Bold text (14px bold) — Important information displayed clearly.
Link example

What is WCAG Contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for users with visual impairments, including low vision and color blindness. Contrast ratio is calculated from the relative luminance of the foreground and background colors, ranging from 1:1 (no contrast) to 21:1 (maximum — black on white).

The formula uses the relative luminance of each color: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance accounts for human perception — green light appears brighter than blue light of the same intensity.

Meeting WCAG contrast requirements is essential for accessibility compliance (ADA, Section 508, EN 301 549) and also improves usability for all users in challenging conditions like bright sunlight, low-quality displays, or tired eyes.

AA vs AAA — Which Standard Should You Meet?

WCAG Level AA is the minimum recommended standard for most websites and applications. It requires:

• Normal text (under 18pt or 14pt bold): contrast ratio of at least 4.5:1
• Large text (18pt+ or 14pt+ bold): contrast ratio of at least 3:1
• UI components and graphics: contrast ratio of at least 3:1 against adjacent colors

WCAG Level AAA is the enhanced standard, recommended for government sites, healthcare, and applications serving users with visual impairments:

• Normal text: at least 7:1
• Large text: at least 4.5:1

Most organizations target AA compliance as a practical baseline. AAA can be difficult to achieve with brand colors but should be considered for body text and critical information. This tool checks both levels so you can make informed decisions.

Frequently Asked Questions

What is color contrast accessibility?
Color contrast accessibility ensures text and UI elements are readable by people with visual impairments. It's measured as a ratio between the relative luminance of foreground and background colors — a higher ratio means better readability.
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of international standards by the W3C defining how to make web content accessible. WCAG 2.1 specifies minimum contrast ratios for text and UI components.
What contrast ratio do I need?
For AA: normal text needs 4.5:1, large text needs 3:1. For AAA: normal text needs 7:1, large text needs 4.5:1. UI components need at least 3:1.
What is the difference between AA and AAA?
AA is the minimum standard (4.5:1 for normal text). AAA is enhanced (7:1 for normal text). AA suits most sites; AAA is ideal for government, healthcare, and high-accessibility applications.
How do I fix low contrast?
Darken the foreground or lighten the background (or vice versa) until the ratio meets the threshold. This tool provides automatic fix suggestions showing the minimum adjustment needed.