Contrast Checker
Enter a text color and a background color to get the WCAG 2.x contrast ratio and pass/fail results for AA and AAA text and for UI components.
Normal text (14px)
Large text (30px bold)
The quick brown fox jumps over the lazy dog. This is how body text looks with this color pair.
Contrast Ratio
14.62:1
Passes AAA for all text
AA · Normal text
Min 4.5:1 · SC 1.4.3
AA · Large text
Min 3:1 · SC 1.4.3
AAA · Normal text
Min 7:1 · SC 1.4.6
AAA · Large text
Min 4.5:1 · SC 1.4.6
AA · UI components & graphics
Min 3:1 · SC 1.4.11
Large text means at least 18pt (24px) regular or 14pt (about 18.7px) bold. Colors with transparency are not supported.
About the Contrast Checker
Low-contrast text is hard to read for people with low vision, and for everyone on a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background, and this checker calculates that ratio for any pair of colors and shows which levels it meets.
The calculation follows WCAG 2.x. Each color’s relative luminance is computed from its sRGB values, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 for identical colors to 21:1 for black on white. Level AA requires 4.5:1 for normal text and 3:1 for large text; level AAA requires 7:1 and 4.5:1. Success criterion 1.4.11 also asks for 3:1 for user-interface components and meaningful graphics, such as input borders, icons and focus indicators. The ratio is shown truncated, not rounded, because the thresholds are strict: 4.499:1 does not meet 4.5:1.
In WCAG, large text means at least 18 point (24 CSS pixels) in regular weight, or 14 point (about 18.7 px) in bold. As an example, the default pair here, #1E293B on white, scores 14.62:1 and passes every check. Mid-gray #777777 on white comes to 4.47:1 and just fails AA for normal text, while #767676 reaches 4.54:1 and passes.
The checker works with solid colors only. For text over a photo or gradient, measure against the lightest or darkest area behind the text. To find a darker or lighter version of a color that passes, use the shades in the Color Picker and paste the HEX code back here.
How to use the Contrast Checker
- 1
Enter the text color
Use the picker or type a HEX code, such as #1e293b or #fff, under Text (foreground).
- 2
Enter the background color
Do the same under Background. The arrow button between them swaps the two colors.
- 3
Read the result
Check the ratio, the summary line and the five pass/fail cards. The preview shows normal and large text in your colors.
What it can do
WCAG 2.x formula
Relative luminance and the (L1 + 0.05) ÷ (L2 + 0.05) contrast ratio, as defined in the guidelines.
Five checks
AA and AAA for normal and large text (SC 1.4.3 and 1.4.6) and AA for UI components and graphics (SC 1.4.11).
Strict display
The ratio is truncated to two decimals, so a failing pair never looks like a pass.
Live preview
Sample text in normal and large sizes, drawn in your colors.
Forgiving input
Three- or six-digit HEX codes with or without #; invalid input is flagged while the last valid color stays in use.
Limitations
- Solid colors only: no transparency (alpha), gradients or images.
- It uses the WCAG 2.x contrast formula and does not calculate APCA, the different method being discussed for future guidelines.
- Passing the ratio doesn’t guarantee readability; font size, weight and very thin typefaces matter too.
- One color pair at a time.
Privacy
The calculation runs in your browser; the colors you enter are not sent anywhere.
Frequently asked questions
What contrast ratio do I need for body text?
At least 4.5:1 to meet WCAG level AA, the level most often used as a target in accessibility standards and policies, and 7:1 for AAA.
What counts as large text?
Text that is at least 18pt (24px) in regular weight, or at least 14pt (about 18.7px) in bold. Large text needs only 3:1 for AA and 4.5:1 for AAA.
Why does it show 4.49 when rounding would give 4.50?
WCAG thresholds are strict, so a ratio of 4.497:1 does not pass 4.5:1. Rounding up would make a failing pair look like a pass, so the tool truncates to two decimals instead.
Do logos and disabled buttons have to pass?
WCAG 1.4.3 exempts text that is part of a logo and text in inactive (disabled) components. Placeholder text is not exempt; if it conveys information, it needs the same 4.5:1 as other text.
Does it matter which color is the text and which is the background?
Not for the ratio, which is the same either way. The swap button lets you preview both versions, since light text on a dark background can look quite different from the reverse.
Ratings & Reviews
Rate Contrast Checker
Help others by sharing your experience. Your rating is shown without your name.
More Design Tools
View all →Color Picker
Pick a color and copy it as HEX, RGB or HSL
Color Palette Generator
Generate five-color palettes from color-harmony rules or at random
Font Preview
Preview and compare Google Fonts with your own text
Colorblind Simulator
Approximate how an image looks with seven types of color blindness