urlkit[ CHECK / [Aa] ]
Color contrast checker
Check text and background colors against WCAG AA and AAA ratios.
02 / Your result
Your result will appear here.
Start with your own input or try an example.
What it does
Check whether a pair of solid colors provides enough contrast for text. Enter foreground and background colors to calculate their WCAG relative luminance ratio, preview the pairing, and see separate AA and AAA results for normal and large text. The pass decisions use the full calculated ratio before display rounding.
Useful when
- Check a body-text color before adding it to a page theme.
- Compare a heading and its solid background during a design review.
- Document a proposed color pair for an accessibility handoff.
How to use it
- Enter opaque text and background colors as HEX, RGB, or HSL.
- Check the contrast ratio and the four text threshold results.
- Review the sample, then copy or download the comparison for your design notes.
A few useful details
What are the AA and AAA thresholds?
WCAG text contrast requires at least 4.5:1 for normal text and 3:1 for large text at AA. AAA raises those thresholds to 7:1 and 4.5:1 respectively. Ratios below a threshold fail even if rounding would display the threshold value.
What counts as large text?
Large text is at least 18 points, equivalent to 24 CSS pixels, or at least 14 points bold, approximately 18.67 CSS pixels. Font weight and actual rendered size matter; a heading label alone does not make text large.
Does a passing result establish full WCAG compliance?
No. This calculation covers text contrast between two opaque sRGB colors. Transparency, image backgrounds, gradients, interactive states, focus indicators, and other accessibility requirements need separate checks in the actual interface.