Color Contrast Checker
Test foreground and background colors against WCAG 2.2, review AA and AAA results for text and UI, and find the nearest passing combination.
Sample Text
This is how your text looks with the selected foreground and background colors. Check the score on the right to see if it meets accessibility standards.
Foreground
Background
Contrast Score
WCAG Guidelines
AA: Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
AAA: Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Quick answer
WCAG contrast is calculated from the relative luminance of the foreground and background. Normal text passes AA at 4.5:1, large text and meaningful non-text UI pass at 3:1, and AAA text targets are 7:1 or 4.5:1 for large text.
Quick guide
How to check color contrast
Compare a foreground color with its background, see the exact contrast ratio, and verify the WCAG results that apply to text and interface components.
- 1
Enter both colors
Set an opaque HEX foreground and background, or use the color controls to explore combinations visually.
- 2
Read every WCAG result
Review AA and AAA separately for normal text, large text, and non-text interface components.
- 3
Correct a failing pair
Apply the suggested nearest AA-passing foreground, then confirm that it still fits the design and remains readable in context.
Practical uses
Product interfaces
Test body text, labels, buttons, form borders, icons, and status colors before implementation.
Design systems
Validate reusable foreground/background tokens so teams start from accessible combinations.
Content and marketing
Check headings, captions, calls to action, and campaign colors before publishing.
Method and accuracy
How this tool works
The checker linearizes each sRGB channel, calculates relative luminance with the WCAG coefficients, and compares the lighter and darker luminance values using (L1 + 0.05) / (L2 + 0.05). Correction suggestions keep hue and saturation stable while searching in both lightness directions for the closest color that reaches the selected AA threshold.
Frequently asked questions
What contrast ratio does WCAG AA require?
AA requires at least 4.5:1 for normal text and 3:1 for large text. Many meaningful interface components and graphical objects also require 3:1.
What contrast ratio does WCAG AAA require?
AAA requires at least 7:1 for normal text and 4.5:1 for large text. AAA is stricter than the common AA target.
Does a passing ratio guarantee accessible text?
No. Contrast is one requirement. Font size, weight, spacing, readability, interaction states, and the actual background also matter.