Add your input
Foreground and background color values.
Design bench
WCAG contrast checker
See AA and AAA results for normal and large text at a glance.
Privacy built inYour work stays with you
Readable by design.
Preview regular body copy and larger display text before shipping your interface.
Contrast ratio
17.85:1
AA pass
AA normal textPass
AA large textPass
AAA normal textPass
AAA large textPass
UI componentsPass
Your work stays private in your browser while you use this tool.
What does wcag contrast checker do?
Calculate the WCAG 2 contrast ratio for a foreground HEX color against a background HEX color, preview the pair, and check it against AA, AAA, large-text, and non-text UI thresholds.
- Input
- Foreground and background color values.
- Result
- Contrast ratio, WCAG results, and a live text preview.
- Price
- Free
- Account
- Not required
How to use wcag contrast checker
Choose your settings
See AA and AAA results for normal and large text at a glance.
Save or copy
Contrast ratio, WCAG results, and a live text preview.
A practical tip
Aim for at least 4.5:1 for normal body text and do not rely on color alone to convey meaning.
When to use wcag contrast checker
Check body text colors before adding them to a design system.
Compare a button label with its fill for normal- and large-text requirements.
Swap foreground and background values to confirm that the ratio is unchanged while reviewing the visual result.
Worked example
A concrete wcag contrast checker example
- Input
- Text #0F172A on background #FFFFFF
- Result
- The calculated ratio is 17.85:1. It passes AA and AAA for normal and large text and exceeds the 3:1 UI-component threshold shown by the tool.
What to expect
How it works
Each sRGB channel is linearized using the WCAG formula, combined into relative luminance, and compared as (lighter + 0.05) / (darker + 0.05). The resulting ratio is tested against 4.5:1, 3:1, and 7:1 thresholds as appropriate.
Know before using
Limits and edge cases
- Only opaque HEX colors are evaluated. Alpha compositing, gradients, background images, font weight, anti-aliasing, and state changes are outside this calculation.
- A passing ratio does not establish full accessibility: text size classification, color-independent cues, focus appearance, and real interface context still need review.
Standards and sources
Common questions
WCAG contrast checker FAQ
Is wcag contrast checker free to use?
Yes. WCAG contrast checker is free to use.
Does wcag contrast checker keep my work private?
Yes. Your work stays private while you use the tool — nothing you enter is uploaded.
What counts as large text in the displayed WCAG checks?
WCAG 2 defines large-scale text as at least 18 point, or at least 14 point when bold. The tool reports the ratio and threshold but cannot infer the rendered font size or weight of your product UI.
Does swapping the two colors change the contrast ratio?
No. The ratio always places the lighter luminance over the darker luminance, so foreground and background order does not change the numeric result. The preview can still look different in context.