Updated November 2026 · free, works in your browser
Show the formula
Each channel is scaled to 0–1 and linearised: c ≤ 0.04045 → c / 12.92, otherwise ((c + 0.055) / 1.055)^2.4.
Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B.
Contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05). The ratio is shown truncated to two decimals so a near miss is never rounded up to a pass.
A color contrast checker measures how easily text can be read against its background. Enter two colors above and you get the WCAG contrast ratio plus a clear pass or fail for AA and AAA levels, for both normal and large text.
How to use the color contrast checker
- Type the text color as a hex code in the first field, or pick it with the color swatch. Short codes such as #fff work too.
- Enter the background color in the second field in the same way.
- Read the contrast ratio. It updates instantly as you type.
- Check the AA and AAA badges. Use the preview box to see how real text looks with your pair, and press Swap colors to try the reverse combination.
- Copy the link to share the exact result with a teammate or a client.
How it is calculated
The checker follows the Web Content Accessibility Guidelines (WCAG) 2.x definition of contrast ratio:
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
- L1 is the relative luminance of the lighter color and L2 that of the darker color.
- Relative luminance is 0.2126 × R + 0.7152 × G + 0.0722 × B, where R, G and B are the sRGB channel values converted to a linear scale.
- Each channel is first divided by 255. If the result is 0.04045 or lower it is divided by 12.92, otherwise it is calculated as ((value + 0.055) / 1.055) raised to the power 2.4.
The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). It is shown truncated to two decimals, so a value just below a threshold is never rounded up into a pass.
WCAG contrast requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (about 24 px regular or 18.66 px bold and up) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | not defined |
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
Normal body text needs at least 4.5:1. Large text needs at least 3:1, and so do meaningful interface elements such as input borders and icons.
What counts as large text?
WCAG defines large text as at least 18 point (about 24 CSS pixels) or at least 14 point bold (about 18.66 CSS pixels).
Does the order of the two colors matter?
No. The ratio is the same whichever color is the text and whichever is the background, because the formula always divides the lighter luminance by the darker one.
Do logos and decorative text need to meet the ratio?
WCAG exempts pure decoration, inactive controls and logotypes. Anything that conveys information or can be interacted with should meet the thresholds.
Is a passing ratio enough to guarantee readability?
Not always. Font weight, size, anti-aliasing and the viewing environment also matter. The ratio is a reliable minimum, so test real text on real screens as well.
From readable screens to real journeys
Good contrast matters most when people read a screen in difficult conditions, such as bright sun on a phone while standing in a station or checking a booking on the road. If you design pages for travelers, such as listings of hotels and stays by destination, clear text and well-separated buttons help visitors compare options quickly and confirm details with confidence.
Other tools
- CSS Gradient GeneratorPick two or three colors, an angle and a type, preview the gradient live and copy the CSS.
- CSS Box Shadow GeneratorTune offset, blur, spread and color with a live preview, then copy the box-shadow CSS.
- Photo Mosaic MakerRebuild one photo out of many small tile photos and download the mosaic as a PNG.