Does this pair actually read?
Two colors, one ratio. This runs the WCAG relative-luminance formula in your browser and tells you whether text on this background will hold up.
Contrast is calculated in the browser. Nothing is uploaded.
What it does
About the Contrast Checker.
A contrast checker compares the relative luminance of a foreground color and a background color, then reports the ratio against WCAG AA and AAA thresholds.
Designers use it before locking a palette so body copy, labels, and UI chrome stay readable. This version runs the WCAG relative-luminance formula locally, so you can try pairs without sending colors to a server.
How to use
Three steps.
Set
Set the foreground (text) color and the background color with the pickers or by typing hex.
Read
Read the contrast ratio and the pass or fail state for normal text and large text.
Copy
Swap colors if you need the inverse pair, then copy the ratio or CSS color values.
When to use it
Where it helps.
Use it when choosing type on cards, buttons, charts, and dense B2B dashboards. Check hover and disabled states too, not only the default fill. Large text (18px regular or 14px bold, in WCAG terms) has a lower bar than body copy.
FAQ
FAQ.
How does this contrast checker work?
It converts each hex color to sRGB, computes relative luminance with the WCAG 2 formula, then divides the lighter luminance by the darker one (plus 0.05). The result is the contrast ratio shown on the page.
What contrast ratio is WCAG AA and AAA?
For normal text, AA is 4.5:1 and AAA is 7:1. For large text, AA is 3:1 and AAA is 4.5:1. UI graphics and focus indicators often target at least 3:1 against adjacent colors.
Does the tool upload my colors?
No. Color values stay in your browser. There is no account and no backend processing.
How do I copy the result into CSS?
Copy the hex (or other CSS color) from the tool, then paste it into your stylesheet or design tokens. Keep the ratio next to the pair in a spec so engineering does not drift.
Is this a substitute for a full accessibility audit?
No. Contrast is one WCAG requirement. You still need to check focus order, names, states, motion, and real assistive-tech testing on the product.
More tools
color
Hex to RGB/HSL Converter
Convert hex colors to RGB and HSL, or reverse them.
color
Color Blindness Simulator
Preview a color or UI screenshot under protanopia, deuteranopia, and tritanopia.
type
Type Scale Generator
Generate a modular type scale from a base size and ratio.