Loading color tools…
Loading color tools…
Loading color tools…
Check if your text and background colors meet WCAG accessibility standards. Live preview included.
Low-contrast text is one of the most common accessibility failures on the web, and it affects far more people than screen-reader users alone — anyone reading on a dim phone screen in sunlight, anyone with low vision, and anyone simply over 40 benefits from readable contrast. This tool computes the exact WCAG relative luminance and contrast ratio between any two colors, then checks the result against the four official pass/fail thresholds: 4.5:1 for normal text at AA, 3:1 for large text at AA, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA. Everything runs client-side in your browser — no colors are sent to a server.
Large Text Sample
This is what body text looks like at 14px with this color combination.
Small UI label text at 12px.
Contrast Ratio
5.17:1
On your background color, the most readable text color is:
Pick any color and instantly get its HEX, RGB, HSL, and CMYK values
Generate beautiful multi-color palettes from a single seed color
Create CSS linear, radial, and conic gradients with live preview and code output
Upload an image and extract its dominant colors as a palette
Enter the foreground color
Use the color picker or type a HEX code for your text color.
Enter the background color
Pick or type the background color the text will sit on.
Read the contrast ratio
The large ratio number shows how much contrast exists between the two colors.
Check WCAG compliance
Four pass/fail badges show whether your combination meets AA and AAA for both normal and large text.
Swap colors if needed
Click the swap button to reverse foreground and background and re-check.
WCAG defines readability not by comparing raw RGB values or simple lightness, but through a measure called relative luminance — an approximation of how bright a color appears to the human eye. To compute it, each sRGB channel (R, G, B, on a 0–1 scale) is first gamma-corrected, or "linearized," because sRGB values are stored non-linearly relative to actual light intensity. The linearized channels are then combined using the ITU-R BT.709 luminance coefficients: roughly 0.2126 for red, 0.7152 for green, and 0.0722 for blue. Green dominates the sum because the eye is far more sensitive to green wavelengths than to red or blue at the same numeric intensity — which is why a saturated blue can look darker to the algorithm than a saturated green of identical brightness in RGB terms.
Once both colors have a relative luminance value (L1 for the lighter color, L2 for the darker one), the contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05). The +0.05 offset accounts for ambient light scatter so the formula never divides by zero and always produces a sensible ratio between 1:1 (identical colors) and 21:1 (pure black on pure white). This is the exact formula defined in WCAG 2.0/2.1/2.2 Success Criterion 1.4.3 and 1.4.6.
WCAG then sets four thresholds against that ratio. Level AA — the level most accessibility guidelines and legal standards reference — requires at least 4.5:1 for normal text and 3:1 for large text (18pt/24px regular, or 14pt/18.66px bold, and larger) and for graphical UI components. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. There is no in-between tier — text either meets the large-text size cutoff or it doesn't, and the corresponding threshold applies in full.
All of this math runs entirely in JavaScript inside your browser tab. No colors, hex codes, or images are ever transmitted anywhere, so you can test a private brand palette with the same confidence as a public one. Once you have a passing palette, you can turn it into reusable tokens with the CSS Variable Generator.
Unlike most online tools, Toolivon processes everything directly in your browser using the Web APIs built into Chrome, Firefox, Safari, and Edge.
Last updated: