Articles · Design Tools
Check contrast before you ship a color pair
A light blue on white looks fine on a calibrated monitor and fails on a projector. Designers need a ratio, not a vibe. Developers need HEX, RGB, and HSL for the same pair. Accessibility reviewers need pass/fail for normal and large text with a documented method. Doing that in the browser avoids uploading a brand palette to a third-party contrast toy.
Why this is worth doing in the browser
DevNestro’s Color & Accessibility Checker implements WCAG 2.2 success criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) using the relative luminance formula published with WCAG 2. That is not a full audit, not WCAG 3, and not a claim that a page is conformant. Inputs accept a picker plus HEX (3 or 6 digit), RGB, and HSL. Results show the ratio and AA/AAA for normal and large text, with pass/fail words rather than color alone. A preview renders heading, body, button, and link using the pair. Palette mixes (lighter, darker, complementary) are mathematical and are not automatically accessible. If the pair fails the selected AA normal-text target, a nearby text color is suggested by mixing toward black or white until the threshold is met, with a short explanation. Fake color-blind filters are not included in v1.
How to use the tool
Enter text and background, read the ratio, copy the format you need, try a suggestion if the pair fails. Related image tools help when the real problem is a screenshot, not a token.
- Treat 4.5:1 as AA for normal text and 3:1 for large text per the documented criteria.
- Do not ship complementary palette colors without running contrast again.
- Use the suggestion as a starting point, then re-check brand constraints.
- Remember this is contrast math, not a complete accessibility review.
Privacy
Colors stay in the session. They are not uploaded and are not sent to analytics.
Before you lock a theme, open the Color & Accessibility Checker, confirm the ratio, and copy HEX that actually passes.