Readable text is the foundation of an accessible interface, and readability comes down to contrast between the text and its background. The Web Content Accessibility Guidelines (WCAG) define exact contrast ratios that color combinations must meet. The ToolOrbit Color Contrast Checker computes that ratio and tells you instantly whether a pairing passes AA or AAA.
How the contrast ratio is calculated
WCAG measures contrast as the ratio between the relative luminance of the lighter color and the darker color. The result ranges from 1:1 for identical colors up to 21:1 for pure black on pure white. The calculation accounts for how human eyes perceive different color channels, so it is not a simple difference of brightness.
#595959 on #FFFFFF -> 7.0:1 (AAA pass) #777777 on #FFFFFF -> 4.48:1 (AA pass, AAA fail) #AAAAAA on #FFFFFF -> 2.32:1 (fail)
What the WCAG thresholds require
- AA normal text: at least 4.5:1
- AA large text (18pt or 14pt bold): at least 3:1
- AAA normal text: at least 7:1
- AAA large text: at least 4.5:1
- UI components and graphical objects: at least 3:1
Using the checker
Enter a foreground and background color as hex values and the checker shows the ratio along with clear pass or fail badges for each WCAG level. Adjust the colors until you clear the threshold you are targeting. Everything is calculated in your browser, with a live preview so you can judge readability with your own eyes too.
Best practices
Design for AA as a baseline and reach for AAA on body text where you can. Never rely on color alone to convey meaning, since contrast helps low-vision users but not those who cannot distinguish hues. Check your hover, focus, and disabled states as well, because they are easy to forget and often fall below the line.
Large-text and component rules
WCAG gives large text an easier bar (3:1) than normal text (4.5:1) because thicker letterforms tolerate lower contrast. That only helps sizes like 18pt (24px) regular or 14pt (18.66px) bold and above — a slightly bigger button label still needs the full ratio. Non-text UI like focus indicators and icon boundaries want at least 3:1 against their backgrounds, which is exactly why a checker with a live ratio readout beats eyeballing it in design tools.
- Design in gray-scale-light contrast? No — test actual pairs.
- Focus styles: check the ring color against both the background and the bordered element.
- Test on both the light theme and the dark theme; ratio flips between them.
