Trình kiểm tra độ tương phản màu

(Tài liệu bằng tiếng Anh)

What it does

Computes the WCAG 2.2 contrast ratio between a foreground and a background color and judges it against the accessibility thresholds: AA for normal text (≥ 4.5:1), AA large for large text (≥ 3:1), and AAA (≥ 7:1). The math is the real relative-luminance formula - each sRGB channel is linearized, combined with the WCAG coefficients, and the ratio is (lighter + 0.05) / (darker + 0.05).

It accepts #rgb and #rrggbb hex colors (case-insensitive, with or without the leading #), shows pass/fail badges for all three thresholds at once, and renders a live preview panel - a pangram and a glyph/number line painted in your exact color pair. 100% client-side.

How to use it

1. Set the Foreground color: click the swatch to open a color picker, or type a hex value in the text field.
2. Set the Background color the same way. The tool opens on #e9e9f1 on #07070b, a pair that passes AAA by design.
3. Click Swap to exchange the two colors - useful for checking both dark-on-light and light-on-dark variants of a theme.
4. Read the result: the ratio (2 decimals) plus the three badges AA, AA large, AAA, each green (pass) or red (fail).
5. Check the preview block beneath - your text rendered in the chosen pair - to judge it with your own eyes.
6. If either value is not a valid hex color, the tool shows an error and hides the results until you fix it.

Examples

Verified by running contrastRatio() from src/lib/color.ts (the exact function the tool uses):

#e9e9f1 on #07070b   16.65:1   AA pass · AA large pass · AAA pass   (tool defaults)
#ffffff on #000000   21.00:1   AA pass · AA large pass · AAA pass   (the maximum)
#f8fafc on #1e293b   13.98:1   AA pass · AA large pass · AAA pass
#abc    on #000000   10.69:1   AA pass · AA large pass · AAA pass   (3-digit shorthand works)
#767676 on #ffffff    4.54:1   AA pass · AAA fail                   (the classic "just barely AA" gray)
#777777 on #ffffff    4.48:1   AA fail · AA large pass              (one notch darker fails AA)
#3b82f6 on #ffffff    3.68:1   AA fail · AA large pass              (Tailwind blue-500 on white)

The #767676 vs #777777 pair shows why exact math beats eyeballing: a 1-unit hex difference crosses the 4.5:1 AA line.

Good to know

• Private: all math runs in your browser; nothing is sent anywhere.
• Named colors (red, white) and other CSS color formats are rejected - hex only. Enter #rgb or #rrggbb.
• There is no separate AAA-large badge; the tool shows AA (normal), AA large, and AAA (normal) exactly as coded.
• The ratio is symmetric - swapping fg/bg never changes the number, only which direction you read the preview.
• Related tools: Color Picker & Converter, Color Palette Generator, CSS Gradient Generator