Color contrast checker (WCAG)
Enter a text (foreground) and background color as hex (#777, #0e7c66, #0e7c6680), rgb(), hsl() or any CSS color name (rebeccapurple, darkgray). The ratio uses the WCAG 2.x relative-luminance formula; semi-transparent colors are blended over the background first. Nothing is uploaded — everything is computed in this page.
Large text 24px
Normal text 16px — the quick brown fox jumps over the lazy dog.
UI border–
Frequently asked questions
What contrast ratio do I need?
WCAG 2.x level AA needs 4.5:1 for normal text and 3:1 for large text (at least 24px, or 18.66px bold). AAA needs 7:1 and 4.5:1. Icons, input borders and other UI components need 3:1 (success criterion 1.4.11).
Why does 4.48:1 fail?
WCAG thresholds are exact: 4.499:1 is below 4.5:1. The ratio shown is rounded to two decimals but never rounded up past a threshold, and pass/fail uses the unrounded value.
How does “suggest a passing color” work?
It keeps the hue and saturation of your text color and moves its HSL lightness darker or lighter in small steps until the ratio reaches your target, then picks whichever direction changed it least. If no lightness works (e.g. 7:1 on a mid-grey), it says so; change the background instead.
Is this the same as APCA / WCAG 3?
No. This tool implements the WCAG 2.x contrast ratio, which is what current accessibility laws and audits reference. APCA, proposed for WCAG 3, uses a different model and is not included.
Can I check contrast on a real website?
PlainInspect shows the contrast ratio and AA / AAA result for any element you hover on a live page, against its effective background.
Is anything uploaded?
No. Everything runs in this page.