Contrast Checker
Check the WCAG contrast ratio of text and background colors for AA and AAA, with alpha support and the closest passing color suggestions.
Supports HEX, rgb(), hsl(), hwb(), oklch(), oklab() and CSS color names, with alpha.
Supports HEX, rgb(), hsl(), hwb(), oklch(), oklab() and CSS color names, with alpha.
Contrast ratio
5.36:1
APCA for reference: Lc 76.3
WCAG 2 results
- Normal text AANeeds 4.5:1✓ Pass
- Normal text AAANeeds 7:1✗ Fail
- Large text AANeeds 3:1✓ Pass
- Large text AAANeeds 4.5:1✓ Pass
- UI components and graphicsNeeds 3:1✓ Pass
APCA is the contrast method in the WCAG 3 draft. The value is for reference only and does not show conformance with current guidelines.
Preview
Normal text: The quick brown fox jumps over the lazy dog. 敏捷的狐狸跳過懶狗。
Large heading text
Suggested colors
Keeps hue and chroma and changes only OKLCH lightness to find the closest color that passes.
Adjust the text color
- Normal text AAA#2253b8 (7:1)
Adjust the background color
- Normal text AAANo lightness of this hue gets there.
How to use
- Enter any CSS color for “Text color” and “Background color”, such as #3366cc, rgb(51 102 204 / 80%) or oklch(52% 0.16 262), or use the pickers. “Swap colors” exchanges them.
- “Contrast ratio” shows the WCAG 2 ratio instantly and whether normal text, large text and UI components meet AA and AAA.
- “Preview” shows normal text, large text, a button and an icon in your colors.
- When a level fails, “Suggested colors” lists the closest passing colors with the same hue and a different lightness. Click “Use” to apply one, or “Copy” to grab its code.
FAQ
What ratios do AA and AAA require?
WCAG 2 requires 4.5:1 between normal text and its background for AA and 7:1 for AAA. Large text (18 pt / 24 px, or 14 pt / about 18.66 px bold) needs 3:1 for AA and 4.5:1 for AAA. Under 1.4.11, UI components and graphics such as button borders, form fields and icons need at least 3:1.
Why is the ratio truncated?
WCAG does not allow rounding up: 4.499:1 does not meet 4.5:1. The tool checks the unrounded ratio and shows it truncated to two decimals.
How are translucent colors handled?
The background is painted over a white page first, then the text over that result, and the contrast is calculated for the opaque colors you actually see. If your page is not white, enter the composited background color directly.
How are the suggestions found?
In OKLCH, hue and chroma stay the same while lightness moves darker and lighter to find the closest color that still passes after rounding to HEX. Near mid gray, sometimes no lightness reaches AAA, and the tool says so.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is the new contrast method in the WCAG 3 draft. It tells dark-on-light from light-on-dark and reports an Lc value. It is still a draft: the tool follows APCA-W3 0.0.98G-4g for reference only, and WCAG 2 remains the standard for compliance.
Is my data uploaded?
No. All calculations happen in your browser, with no network connection needed.