Color Contrast Checker (WCAG)
Test foreground and background color contrast compliance.
Color Contrast Checker (WCAG)
Check color contrast ratios against WCAG 2.1 accessibility guidelines for AA and AAA compliance.
Configure Test Colors
Contrast Results & Compliance
Sample Text Banner
This is a preview of normal body text rendering against the background.
Contrast Ratio
14.63:1
Overall WCAG Score
AAA
What is the Color Contrast Checker and How Does It Work?
The Color Contrast Checker calculates the WCAG 2.1 contrast ratio between a foreground (text) and background color, then reports whether that combination passes AA or AAA accessibility standards for normal and large text.
L1 is the relative luminance of the lighter color and L2 the darker color, each calculated from the color's RGB channels using the WCAG-standard gamma-corrected luminance formula. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
A high-contrast combination comfortably exceeds both AA (4.5:1) and AAA (7.0:1) thresholds for normal text.
Light gray text on white falls well below the 4.5:1 minimum, making it inaccessible for normal body text.
Common Real-World Use Cases
Verify text/background color pairs meet WCAG 2.1 AA or AAA standards before shipping a design.
Check every text-on-background combination in a design system against accessibility guidelines.
Support ADA/Section 508 or similar accessibility requirements for public-facing websites.
What Your Contrast Ratio Means
Below 3.0:1, text is hard to read for most people regardless of size. Between 3.0:1 and 4.5:1, only large text (18pt+ regular or 14pt+ bold) passes - normal body text still fails WCAG AA at this range. At 4.5:1 and above, normal text passes AA, the level most accessibility regulations reference. Below 7.0:1, you're meeting AA but not the stricter AAA level, which most teams treat as a stretch goal rather than a hard requirement. The ratio only measures the two colors you entered - increasing font weight or size doesn't change the number, but it does lower the threshold you need to pass.
- 1Enter or pick your foreground (text) color.
- 2Enter or pick your background color.
- 3View the calculated contrast ratio and the pass/fail result for AA and AAA at both normal and large text sizes.
- 4Use the sample text preview to see how the combination looks in practice.
- •WCAG AA is the standard most legal accessibility requirements reference; AAA is a stricter, "enhanced" level.
- •Large text (18pt+ or 14pt+ bold) has lower contrast requirements (3.0:1 for AA) than normal body text (4.5:1 for AA).
Frequently Asked Questions
Color & Design Tools
Design utilities for HEX to RGB/HSL conversions, color palette contrast, and color matching.
Related Calculators & Tools
Color Picker & Matcher
Select colors, extract HEX, RGB, and HSL values, and match color combinations for design projects.
Color Palette Generator
Generate harmonized color palettes including complementary, analogous, triadic, and monochromatic schemes.
Color Converter (HEX / RGB / HSL)
Convert between HEX, RGB, and HSL color representations with precise visual feedback.
Color Matcher
Identify an existing color and convert it across HEX, RGB, and HSL formats, then generate a matching complementary palette and tint/shade scale from it.
Color Shade & Tint Generator
Generate lighter tints and darker shades for any base HEX color code.
Aspect Ratio Calculator
Calculate image and video aspect ratios, resize dimensions proportionally, and simplify aspect ratios.