MultiKit

Color Contrast Checker: WCAG AA and AAA for Text and Backgrounds

  • Free
  • No sign-up
  • Runs in your browser
  • Version 1.0.1
  • Last updated 2026-10-25
Report a problem

Enter a text color and a background color to see their contrast ratio, whether they pass WCAG for normal and large text, and a fix if they do not.

Normal text looks like this. The quick brown fox jumps over the lazy dog.

Large text

Button or icon

- : 1

LevelNeedsResult
AA, normal text4.5 : 1
AAA, normal text7 : 1
AA, large text3 : 1
AAA, large text4.5 : 1
AA, interface parts and icons3 : 1

Everything you enter is processed in your browser and is never sent to a server.

How to use

  1. Enter the text color and the background color as hex, rgb(), hsl() or a name, or pick them with the color boxes. Press a preset to try a pair.
  2. Read the ratio and the table. Each row shows what the level needs and whether your colors pass. The preview shows normal text, large text and a button on your colors.
  3. If the colors fail, the closest passing colors are listed under the table. Click one to use it. The page address keeps your colors, so you can share the link.

Examples

Text #767676 on #ffffff
→ 4.54 : 1, passes AA for normal text
This is the lightest grey that passes AA on white.
Text #777777 on #ffffff
→ 4.47 : 1, fails AA for normal text but passes it for large text
A one-step lighter grey is already under the 4.5 line.
Text #999999 on #ffffff
→ 2.84 : 1, fails; the closest passing colors are #767676 (AA) and #595959 (AAA)
The suggestion keeps the grey and only makes it darker.

How it works

The colors are read by the open-source culori library, which understands hex, rgb(), hsl(), oklch() and color names. Contrast is calculated with the WCAG 2 formula: the relative luminance of each color from its linearized sRGB channels, then (L1 + 0.05) / (L2 + 0.05) for the lighter L1 and the darker L2.

The suggested colors keep the hue and the chroma of your text color in the OKLCH color space and move only its lightness, toward black on a light background and toward white on a dark one, as little as is needed to reach the target. If one direction cannot reach the target, the other is tried.

The tool is tested with known values: 21 : 1 for black on white, 4.54 for #767676 on white and 4.47 for #777777, the exact thresholds of every level including the cut-not-rounded rule, the blending of transparent colors, and the suggestions on light, dark and mid backgrounds.

Sources

Frequently asked questions

What contrast ratio do I need?
WCAG level AA asks for 4.5 : 1 for normal text and 3 : 1 for large text. Level AAA asks for 7 : 1 and 4.5 : 1. Parts of an interface, such as icons and the borders of input fields, need 3 : 1. Large text means at least 24 px, or 18.66 px if bold.
Which level should I aim for?
AA is the usual target and what most laws and policies refer to. AAA is stricter and is not required for a whole site, but it helps people with low vision, so use it for body text where you can.
How is the ratio calculated?
Each color is turned into a relative luminance, a measure of how bright it appears, and the ratio is (lighter + 0.05) / (darker + 0.05). It goes from 1 : 1 for two identical colors to 21 : 1 for black on white.
Is 4.499 rounded up to 4.5?
No. The ratio is cut, not rounded, to two decimals, so a color just under the line does not look like it passes. 4.4999 is shown as 4.49 and fails.
What about transparent colors?
A text color with transparency is laid over the background first, and a transparent background over white, because that is what the eye sees. The page tells you when it did this.
Are my colors sent anywhere?
No. Everything is calculated in your browser. The colors are in the page address only so you can share it.
Version history
  • 1.0.1 — Clarifies the search title with the tool's main task and whether it is free or runs online.
  • 1.0.0 — First release.

Last updated: