Are my colors uploaded?
No. The contrast math runs in your browser; the colors are not sent to a server.
◐ Web & Design
WCAG Contrast Checker
Check the WCAG 2 contrast ratio of text and background colors for AA and AAA, and get the nearest passing color with the same hue.
AA & AAA Suggests passing colors Handles transparency APCA readout
Loading Contrast Checker…
Loading Contrast Checker…
What this page sends
- Your input: Processed in this tab and not sent to a server.
- Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing
How the WCAG Contrast Checker Works
Contrast is the accessibility problem that design reviews catch least often, because a color pair that looks fine on a bright, calibrated monitor can be unreadable on a phone in sunlight or for someone with low vision. WCAG 2 turns that into a number: the ratio between the relative luminance of the lighter and darker color, from 1:1 (identical) to 21:1 (black on white). This checker computes that ratio exactly as the specification defines it, compares the unrounded value against every threshold — AA and AAA for normal and large text, and 3:1 for UI components — and previews the pair with real text at the size and weight you choose. When a pair fails, it doesn't just say no: it searches OKLCH lightness, keeping your hue and as much chroma as the sRGB gamut allows, for the closest color that passes, so you can fix the contrast without changing the brand color more than necessary. Links from the Color Converter and Color Palette open here with the colors already filled in.
The WCAG 2 ratio
Each color is converted to linear sRGB and its relative luminance computed as 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05). Pass/fail always uses the full-precision ratio; the display rounds to two decimals and warns when rounding would suggest a pass.
Transparency
Alpha doesn't exist in the WCAG formula, so translucent colors are composited first: the text over the background, and a translucent background over the color you say is behind it. The preview and the ratio both use those composited colors.
Finding a passing color
The suggestion keeps hue fixed and binary-searches OKLCH lightness in both directions, gamut-mapping each candidate into sRGB. It then checks the rounded hex value itself, and picks whichever direction needs the smaller lightness change. If neither direction can reach the target, it tells you rather than suggesting a color that fails.
APCA
The optional APCA readout uses the APCA-W3 0.0.98G formula: a soft black clamp, separate exponents for dark-on-light and light-on-dark, and a result in Lc from about -108 to 106. It is labelled as a draft because WCAG 3 has not been finalised.
Limitations
- Pass/fail uses the WCAG 2 contrast ratio, which is known to misjudge some pairs (especially light text on mid-tone colors). The APCA readout is a draft method, shown for information only.
- Font weight and size are yours to classify; the tool can't see your typeface, anti-aliasing or rendering.
- Transparent colors are composited against the background you specify; real layouts with gradients, images or blur behind text aren't modelled.
- The suggested color keeps the hue and changes lightness only — it may not match your palette.
FAQ
Short answers for the things developers usually ask before trusting a tool.
What contrast ratio do I need?
WCAG 2 level AA needs 4.5:1 for normal text and 3:1 for large text (SC 1.4.3). AAA needs 7:1 and 4.5:1 (SC 1.4.6). User-interface components and meaningful graphics, such as input borders and icons, need 3:1 against adjacent colors (SC 1.4.11).
What counts as large text?
At least 18 point (24 CSS pixels) at normal weight, or at least 14 point (about 18.66 CSS pixels) in bold. Enter your font size and weight and the checker applies the right threshold.
Why does a ratio of 4.50 still fail?
WCAG compares the exact ratio, and rounding up is not allowed. #777777 on white is 4.478:1, which fails AA. If a displayed value rounds to a threshold but the exact value is below it, the checker says so and marks it as failing.
How are transparent colors handled?
A translucent text color is blended over the background first, as the browser draws it. A translucent background needs to know what is behind it, so the checker asks for that color (white by default) instead of guessing.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is the method proposed for the WCAG 3 draft. It accounts for polarity and font weight better than the WCAG 2 ratio, but it is not a compliance standard yet. The optional Lc readout is there for comparison only.
Related tools
Useful follow-ups when one conversion usually turns into three more.
web-design
Color Converter
Convert any CSS color between HEX, RGB, HSL, HWB, Lab, LCH, OKLab and OKLCH at once, with gamut warnings and the nearest named color.
web-design
Color Palette
Extract color palettes from images or build them manually. Export to CSS variables, Tailwind config, SCSS, or JSON with WCAG contrast grades.
test-debug
Accessibility Checker
Audit HTML for WCAG 2.1 AA accessibility violations using axe-core — critical, serious, moderate, and minor issues.
Want the background and worked examples? There's a longer write-up.
Read the Contrast Checker guide