Color Contrast Checker
Check the contrast ratio between foreground and background colours against WCAG AA and AAA standards.
The quick brown fox jumps over the lazy dog. (Normal text — 16px)
Large Bold Text — 24px
Color Contrast Checker calculates the contrast ratio between a foreground colour and a background colour, then shows whether the combination passes or fails the WCAG 2.1 accessibility criteria for text and interface components. Everything runs in your browser — no data is sent anywhere.
What is contrast ratio?
Contrast ratio is a number from 1 : 1 (no contrast — identical colours) to 21 : 1 (maximum contrast — pure black on pure white). It is calculated from the relative luminance of each colour, which is a perceptual measure of how much light the colour appears to emit. The formula is defined by the W3C in WCAG 2.1 Success Criterion 1.4.3.
WCAG conformance levels
The Web Content Accessibility Guidelines define two conformance levels that describe how accessible a colour pair is for users with low vision or colour blindness.
Level AA is the standard target for most websites and is required by many accessibility laws. A contrast ratio of at least 4.5 : 1 is required for normal-sized text (below 18pt or 14pt bold) and at least 3 : 1 for large text (18pt or larger, or 14pt bold) and meaningful UI components such as form borders and icons.
Level AAA is enhanced accessibility. It requires 7 : 1 for normal text and 4.5 : 1 for large text. AAA is recommended for content that serves users with significant visual impairment, but it is not always achievable for every colour combination.
Supported colour formats
You can type a colour in any of the following formats into the text field: #rgb, #rrggbb, rgb(r, g, b), rgba(r, g, b, a), hsl(h, s%, l%), or hsla(h, s%, l%, a). The colour picker updates the text field automatically, and editing the text field updates the picker.
FAQ
What counts as large text for WCAG?
WCAG defines large text as at least 18 point (24px) in regular weight, or 14 point (approximately 18.67px) in bold. If your text meets either of those size criteria, the 3 : 1 ratio threshold applies instead of the stricter 4.5 : 1.
Does the tool account for transparency?
No. The calculator assumes fully opaque colours. If your design uses semi-transparent overlays, you will need to calculate the effective composite colour first and enter that value here.
My design fails AA — what should I do?
Darken the background colour or lighten the foreground colour (or both) until the ratio reaches the required threshold. The live preview updates as you type, so you can adjust one colour at a time and see the ratio change instantly. The swap button lets you easily check whether reversing the pair changes the result.