Color Contrast Checker (WCAG)
Enter a text color and a background color to calculate the WCAG 2.x contrast ratio in real time, and see whether it meets level AA or AAA for normal text and large text. Everything happens in your browser, and nothing you type is ever sent to a server. Need to convert a color code format? Check out the Color Converter as well.
🔒 Runs in your browser · Your data is never sent to a server
Preview
Sample large text
This is a sample of normal-sized text so you can check how it actually looks.
Contrast ratio:
Results
- Normal text, Level AA (4.5:1 or higher)
- Normal text, Level AAA (7:1 or higher)
- Large text, Level AA (3:1 or higher)
- Large text, Level AAA (4.5:1 or higher)
Notes
- Colors can be entered in HEX format like "#333333", or RGB format like "rgb(51, 51, 51)" or "51, 51, 51".
- "Large text" means regular-weight text at 18pt (about 24px) or larger, or bold text at 14pt (about 18.66px) or larger.
- Results follow the contrast ratio formula shared by WCAG 2.0 through 2.2. Newer methods being explored for WCAG 3, such as APCA, are not supported.
- Transparency (alpha) is not supported. If you enter an rgba() value, the alpha component is ignored during calculation.
Glossary
Contrast ratio
A number from 1:1 to 21:1 representing the difference in brightness between two colors. A higher value means the text and background are more clearly distinguishable.
WCAG (Web Content Accessibility Guidelines)
A set of success criteria published by the W3C for making web content more accessible to a wider range of people.
Level AA / AAA
WCAG success criteria come in three levels: A, AA, and AAA. Most websites target AA conformance, while AAA is a stricter standard.
Large text
In WCAG, text that is regular weight at 18pt (about 24px) or larger, or bold at 14pt (about 18.66px) or larger. Because large text is easier to read than small text, its contrast ratio requirement is slightly relaxed.
FAQ
What is the difference between WCAG AA and AAA?
For normal text, AA requires a contrast ratio of at least 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. Most sites aim for AA first.
What counts as "large text"?
Under WCAG, large text is at least 18pt (about 24px) at regular weight, or at least 14pt (about 18.66px) in bold. The requirements are lower for large text.
Does it apply to logos and text in images?
Logos and purely decorative elements are exempt, but functional UI components such as buttons and icons need at least 3:1. Images of text (other than logos, or text that is incidental to a photo) must meet the same ratios as live text (at AA: 4.5:1, or 3:1 for large text). This tool calculates the ratio between two colors.
Share this page