WCAG Color Contrast Checker
This checker calculates the relative luminance contrast ratio for two sRGB colors and compares the result with common WCAG thresholds.
Check text and background contrast
Enter foreground and background HEX values to see the ratio and WCAG-style pass guidance.
Processing mode: browser-only for this tool. The interface does not require a server upload to perform its transformation.
Start with a focused browser tool
This checker calculates the relative luminance contrast ratio for two sRGB colors and compares the result with common WCAG thresholds.
Designed for: Designers, frontend developers, and editors reviewing readable interface color pairs.
How to use this tool
Enter the text color and background color as six-digit HEX values. The preview swatch updates with the pair, and the result shows the ratio plus normal-text and large-text guidance.
How the result is produced
The browser converts sRGB channel values to linear-light values, calculates relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It does not replace a full accessibility review.
Test examples
#000000 on #ffffff produces a high contrast ratio. A pair can pass large-text guidance while failing normal-text guidance, so check the actual font size and weight used by the design.
Limitations
The result covers contrast between two colors; it does not evaluate focus indicators, text size, font weight, semantics, motion, color blindness, or the contrast of images and gradients.
Privacy and processing
Color values are processed in the browser and are not uploaded.
Related guide
Color contrast is one part of accessible design
Related tools in this category
Documentation
This page describes the implementation shipped with the NOFYI Tool Factory. Review the interface output before using it in a production workflow.