Large text, 24 px
Normal body text at 15 px. The quick brown fox jumps over the lazy dog.
This color contrast checker tests a text color against a background color using the WCAG 2.1 formula and shows the contrast ratio live, with pass or fail for AA and AAA at normal and large text sizes. If a pair fails, it suggests the nearest passing color that keeps the same hue, so you can fix a design without changing its look.
How to use
- Tap the big swatch to open the color picker, use the eyedropper to grab a color from your screen, or type in any field.
- Paste any CSS color (#hex, rgb(), hsl(), hwb(), oklch(), lab(), a color name…) into any field, or anywhere on the page.
- Tap the copy button next to a format to copy it. Drag Opacity to add transparency.
- In the palette, tap a swatch to make it the current color; long-press (or right-click) a swatch to copy its HEX. On Contrast, set text and background colors and tap a suggestion to fix a failing pair.
- WCAG 2.1 asks for 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (24 px, or 18.66 px bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphics need 3:1.
- Suggestions keep the hue and saturation and change only the lightness (in OKLCH) to reach the nearest passing value.
- Semi-transparent colors are blended over the background before the ratio is calculated.
- CMYK values are a simple device-independent conversion; for print, use your printer’s color profile.
- Your recent colors are stored only in this browser.
The WCAG thresholds
WCAG 2.1 asks for a contrast ratio of at least 4.5:1 for normal text (level AA) and 7:1 for level AAA. Large text, meaning 24 px or 18.66 px bold and above, needs 3:1 for AA and 4.5:1 for AAA. User interface components and meaningful graphics, such as input borders and icons, need 3:1.
The ratio runs from 1:1 (identical colors) to 21:1 (black on white).
How the ratio is calculated
Each color is converted to relative luminance: the sRGB channels are linearized and weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is (L1 + 0.05) / (L2 + 0.05), with the lighter color on top. Gray #767676 on white gives 4.54:1 and just passes AA, while #777777 gives 4.48:1 and fails, which shows how close the line can be. Semi-transparent colors are first blended over the background.
Fixing a failing pair
Suggestions keep the hue and saturation and change only the lightness in OKLCH, moving to the nearest value that passes. Darkening text is usually the least visible change. Remember that contrast is only one part of accessibility: font weight, size and spacing matter too.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold). Buttons, input borders and icons need 3:1 against their surroundings.
What is the difference between AA and AAA?
AA is the level most laws and guidelines require. AAA is stricter: 7:1 for normal text and 4.5:1 for large text, and is recommended for long reading or for users with low vision.
Does white text on a blue button pass?
It depends on the blue. White on #1E88E5 is 3.68:1, which passes only for large text; a darker blue is needed for normal-sized button labels.
What counts as large text?
Text that is at least 24 px (18 pt) regular, or 18.66 px (14 pt) bold. Everything smaller is normal text.
How does the tool choose a suggested color?
It keeps the hue and saturation and adjusts only the lightness in OKLCH until the pair reaches the target ratio, so the color still looks like the same family.
Is this the same as the APCA contrast method?
No. This checker uses the WCAG 2.1 contrast ratio, which is the formula referenced by current accessibility standards and laws. APCA is a newer, different method.