Color contrast checker
Check the WCAG 2.x contrast ratio between any two colors, see the AA, AAA and UI-component verdicts, and get the smallest lightness tweak that reaches 4.5:1 or 7:1.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Colors
Accepts #rgb, #rrggbb, rgb() and hsl() — type it or use the picker.
Result
Formulas come from WCAG 2.2: relative luminance L = 0.2126R + 0.7152G + 0.0722B over linearized sRGB channels, ratio = (Llight + 0.05) / (Ldark + 0.05).
Sample text 示例文字
Large text (≥18.66px bold or ≥24px)
- AAA body text (≥7:1)Fail
- AA body text (≥4.5:1)Fail
- AAA large text (≥4.5:1)Fail
- AA large text (≥3:1)Pass
- UI components / graphics (≥3:1)Pass
#777777 · 0°, 0%, 46.67%#FFFFFF · 0°, 0%, 100%0.1845 / 1.0000Between pure white and pure black text, the higher ratio is the safer pick.
1.00:121.00:1Hue and saturation stay put; only lightness moves, and only as far as needed.
#767676Target 4.50:1 → 4.54:1Darken the foreground · New lightness 46.47% · Lightness change 0.2#595959Target 7.00:1 → 7.00:1Darken the foreground · New lightness 35.1% · Lightness change 11.57What this tool does
- Sanity-check a palette before shipping: body text needs 4.5:1 and large text 3:1, and you can see exactly how far off a pair is.
- Grey text that "looks fine" in a mockup often fails — #777777 on white lands at 4.48:1, just under the AA line.
- Skip the trial-and-error fixing: the tool returns the smallest lightness change that reaches the target while keeping hue and saturation, ready to copy.
- Verify non-text elements such as buttons, icons and borders against the 3:1 requirement of WCAG 2.2 §1.4.11.
Example
Input
Foreground #777777, background #FFFFFF, target 4.5:1
Output
Ratio 4.48:1, level "Large text / UI only", AA body text fails; fixes: 4.5:1 → #767676 (4.54:1) and 7:1 → #595959 (7.00:1), both by darkening the foreground.
Mid grey is the awkward band: 4.48 and 4.54 are one grey step apart and look identical, yet they decide whether WCAG AA passes.
Frequently asked questions
How is the ratio calculated?
Each sRGB channel is linearized the way WCAG 2.x defines it (c ≤ 0.03928 uses c / 12.92, otherwise ((c + 0.055) / 1.055)^2.4), then weighted into the relative luminance L = 0.2126R + 0.7152G + 0.0722B. The ratio is (Llight + 0.05) / (Ldark + 0.05), which is why pure black on pure white is exactly 21:1.
What are the AA, AAA, body and large-text thresholds?
AA is 4.5:1 for body text and 3:1 for large text; AAA is 7:1 and 4.5:1 respectively. UI components and graphics need 3:1 under WCAG 2.2 §1.4.11. Large text means 24px and up, or 18.66px (14pt) and up in bold.
Why does the fix only change lightness?
Changing hue or saturation would change the color itself, which is rarely acceptable in a design system. The tool converts the foreground to HSL and binary-searches in a single direction — darker on light backgrounds, lighter on dark ones — so the suggested value still reads as the same color.
When is there no suggestion?
If the two colors are so close in luminance that even pure black or pure white cannot reach the target, no lightness tweak will save the pair and the tool says so — a mid grey background with mid grey text is the classic case for 7:1.
Are my colors uploaded anywhere?
No. Everything is computed in the browser, the page makes no requests, and nothing you type is stored.
Keywords：contrast ratiowcag contrastaccessibility checkeraa aaa contrastrelative luminance对比度检测无障碍对比度WCAG 2.2颜色对比度修复建议