font inspectorText contrast checker
Check the contrast ratio between a text color and its background against WCAG AA and AAA. Accepts HEX, RGB, HSL and OKLCH colors.
Enter two valid CSS colors, for example #1a1a1a, rgb(26 26 26), hsl(0 0% 10%) or oklch(0.2 0 0).
How is the contrast ratio calculated?
WCAG compares the relative luminance of the two colors. Each color is converted to linear light, weighted for how sensitive the eye is to red, green and blue, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). Black on white is 21:1, and identical colors are 1:1.
Level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Large means at least 24px, or about 18.66px when bold.
The number is a floor, not a goal. Thin weights, small sizes and light gray on white can pass on paper and still be tiring to read. More in how to check text contrast on a live website.
What contrast ratio do I need for body text?
At least 4.5:1 to meet WCAG level AA, and 7:1 for level AAA.
Can I enter OKLCH or HSL colors?
Yes. The checker accepts any color your browser understands, including HEX, rgb(), hsl(), oklch() and color names.
Does this cover text on images or gradients?
No. A single ratio only describes two flat colors. For text over an image, check the lightest and darkest areas behind the text, or add a solid overlay.
Does the contrast rule apply to logos or disabled buttons?
No. WCAG exempts logotypes, text in inactive controls and purely decorative text from the contrast requirement.
Do icons and input borders need contrast too?
Yes. WCAG 2.1 asks for at least 3:1 for the parts of controls and graphics that people need in order to understand them, such as an input border or a meaningful icon.
Check contrast right on the page.
Click any text with Font Inspector to see its text color, background color and WCAG contrast ratio, with colors in HEX, RGB, HSL or OKLCH.