Contrast is not a matter of taste. It is a published, testable ratio between the relative luminance of two colours, and the Web Content Accessibility Guidelines set specific minimum ratios for text to remain readable for people with low vision or colour vision deficiencies. A combination that looks fine on a bright design monitor can fail badly on a phone in sunlight, which is exactly the gap this checker closes by giving you the number rather than a guess.
The calculation runs entirely in your browser using the same formula browsers and accessibility auditing tools use internally, so the ratio you see here is the same one a screen reader user's assistive technology, or an automated accessibility audit, would report.
How to read a color contrast checker result
Contrast ratio is expressed as a number from 1 to 21, where 1 means the two colours are identical and 21 means one is pure black and the other pure white, the maximum possible contrast in sRGB. WCAG 2.1 sets three thresholds that matter in practice: 3 to 1 for large text and user interface components at the AA level, 4.5 to 1 for normal text at AA, and 7 to 1 for normal text at the stricter AAA level. A reliable text background contrast measurement always comes from this formula rather than a visual guess.
Large text is defined specifically, not just anything that looks big. It means 18 point text, roughly 24 pixels, or 14 point bold text, roughly 18.5 pixels bold, and it gets a lower threshold because bigger, heavier strokes remain legible at lower contrast than fine body text does.
- AA normal text needs at least 4.5 to 1, this is the legal minimum most accessibility regulations reference.
- AA large text and AA user interface components need at least 3 to 1.
- AAA normal text needs at least 7 to 1, a stricter voluntary target for maximum readability.
- AAA large text needs at least 4.5 to 1.
- Decorative text and disabled controls are exempt from these thresholds under the guidelines.
The relative luminance formula behind the ratio
WCAG defines relative luminance from the linear, not the raw, red, green and blue values of a colour. Each sRGB channel is first converted from its 0 to 1 gamma encoded value to a linear value using the sRGB transfer function: values at or below 0.04045 divide by 12.92, everything above that is raised through the formula ((channel plus 0.055) divided by 1.055) to the power of 2.4.
Relative luminance is then a weighted sum of the three linear channels, 0.2126 for red, 0.7152 for green and 0.0722 for blue, reflecting how much each colour contributes to perceived brightness for a typical human eye. Green weighs far more than blue because the eye is much more sensitive to it, which is why a pure blue and a pure green with the same raw brightness produce very different luminance values.
The contrast ratio itself is the lighter of the two luminance values, plus 0.05, divided by the darker luminance value, plus 0.05. That small 0.05 constant prevents the ratio from becoming undefined or absurdly large when either colour approaches absolute black, and it comes directly from the WCAG 2.1 specification rather than being an approximation.
Choosing an accessible colour combination
The single biggest lever for accessible color combinations is lightness contrast, not hue. Two colours with very different hues but similar lightness, a mid tone red and a mid tone green for example, often still fail contrast badly, while a dark navy on white or a near white on a deep charcoal reliably pass with room to spare. If a combination is failing, try moving lightness apart before reaching for a different hue entirely.
Brand colours frequently sit in a mid lightness range chosen for visual impact rather than for use as body text, so pairing brand accent colours directly with white or light grey backgrounds is one of the most common accessibility failures found in real interfaces. Reserve those colours for large elements or icons at a lower contrast threshold, and use a darker or lighter derived shade for actual text.
Testing user interface components, not just text
WCAG 2.1 introduced success criterion 1.4.11, non text contrast, which applies a 3 to 1 minimum to the visual boundaries of active user interface components such as button borders, form field outlines, focus indicators and toggle switches, as distinct from the text that sits inside them. A button can have perfectly legible label text while its border is invisible against the page background, and that border failure is exactly what this checker's UI component result flags.
This is easy to miss because most contrast discussion focuses on text, but a control someone cannot see the edges of is a real barrier for low vision users even when the text label passes every threshold on its own.
How this color contrast checker works under the hood
The tool parses both colours, computes relative luminance for each using the linear sRGB formula above, then divides the lighter luminance by the darker one after adding the 0.05 offset. That single number is compared against the four WCAG thresholds to produce the pass and fail badges you see for AA and AAA, at both normal and large text sizes, plus the separate UI component threshold.
Everything is arithmetic on two colour values, so there is no server call and no delay beyond the brief moment it takes to repaint the preview. Change either colour and every result updates together.
| Content type | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (18pt or 14pt bold) | 3 : 1 | 4.5 : 1 |
| User interface components | 3 : 1 | Not defined |
| Decorative or disabled elements | Exempt | Exempt |
How to check color contrast
- 1
Set the text colour
Pick or type the hex code for your foreground, typically body text or a label.
- 2
Set the background colour
Pick or type the hex code for the background the text sits on.
- 3
Read the contrast ratio
The exact ratio, from 1 to 21, appears immediately along with the live text preview.
- 4
Check pass and fail badges
Review AA and AAA results for normal text, large text and UI components before shipping the combination.
Related tools worth bookmarking
Sources and further reading
- W3C: WCAG 2.1 success criterion 1.4.3, contrast minimumThe normative specification defining the 4.5 to 1 and 3 to 1 contrast thresholds this tool applies.w3.org
- MDN: Understanding WCAG, color contrastMDN's explanation of the contrast success criteria and how they apply across text sizes.developer.mozilla.org
- web.dev: Color and contrast accessibilityGoogle's guidance on perceiving colour, contrast ratios and designing for low vision users.web.dev
Frequently asked questions
Common questions about the color contrast checker.
It implements the exact relative luminance and contrast ratio formulas published in the WCAG 2.1 specification, rather than an approximation based on brightness or hue distance. Every number this tool reports matches what an automated accessibility audit or a screen reader vendor's own testing tools would calculate for the same two colours.
Normal body text needs at least 4.5 to 1 to pass WCAG 2.1 level AA, which is the level most accessibility laws and procurement standards reference. For the stricter AAA level, normal text needs at least 7 to 1. Large text, 18 point or 14 point bold and above, has lower thresholds of 3 to 1 for AA and 4.5 to 1 for AAA.
The WCAG contrast formula itself is based on luminance rather than hue, so it already accounts for the fact that colour blind users rely more on lightness difference than colour difference to distinguish text from its background. It does not simulate how a specific colour vision deficiency changes the appearance of a colour, which a dedicated color blindness simulator handles separately.
Many saturated brand colours, particularly in the yellow, orange and light blue range, have high relative luminance even though they look vivid, which puts them close to white's own luminance and produces a low contrast ratio. This is why the formula, not visual impression, is the reliable way to judge whether a colour combination is safe for text.
AA is the level referenced by most legal and regulatory accessibility standards worldwide and is the practical minimum target for production interfaces. AAA is a stricter, voluntary level intended for content where maximum readability matters most, such as government services or content aimed at users with significant low vision, and it roughly doubles the required contrast for normal text.
It applies to the visual boundaries of active, meaningful user interface components, things a user operates such as buttons, inputs, checkboxes and their focus states. Purely decorative borders, disabled controls and inactive elements are generally exempt, but any interactive control a user needs to locate and operate should meet the 3 to 1 non text contrast minimum.
No. Contrast perception varies enormously between monitors, ambient lighting and individual eyesight, so a visual judgement is not a reliable substitute for the published formula. A proper contrast ratio calculator applies the exact WCAG relative luminance math to both colours and returns the same number every screen reader and accessibility audit tool would compute.
Yes, they describe the same measurement. Text background contrast is the everyday phrase for the ratio between a piece of text and the surface it sits on, and a color contrast checker is simply the tool that computes that ratio precisely instead of leaving it to visual judgement, which is unreliable across different screens and lighting conditions.