Color Contrast Checker
Pair contrast
{{ summaryLine }}
{{ summaryLine }}
{{ status }}
| Criterion | Use | Required | Actual ratio | Verdict | Text context | Copy |
|---|---|---|---|---|---|---|
| {{ row.sc }} | {{ row.label }} | {{ row.threshold }}:1 | {{ ratioText(result.ratio) }} | {{ row.pass ? 'Pass' : 'Fail' }} | {{ row.applies ? 'Applies' : 'Other text size' }} |
{{ result.evidence.suggestion_note }}
- {{ index === 0 ? 'Nearest' : 'Alternative' }} · {{ row.direction }}{{ row.value }}{{ ratioText(row.ratio) }} · {{ row.distance.toFixed(4) }} lightness pointsStepped beyond a failing rounded boundary.
{{ status }}
Chart unavailable. Pair verdicts and passing colors remain usable.
{{ 'Visual aid only · ' + result.evidence.typography }}
Normal text · 16 CSS px
Large text · 24 CSS px
{{ 'Compared: ' + result.evidence.compared_foreground + ' on ' + result.evidence.compared_background }}
{{ status }}
| Foreground ↓ / Background → | {{ color.name }} | Copy |
|---|---|---|
| {{ row.name }} | {{ ratioText(cell.ratio) }}{{ cell.pass ? '✓ Pass' : '× Fail' }} |
{{ result.palette.errors.length ? result.palette.errors.join(' ') : 'Open Advanced and add 2–20 colors in Palette audit (optional) to build the matrix.' }}
{{ status }}
Calculation method
- {{ row.label }}{{ row.value }}
{{ status }}
Similar tools
- Color Palette Generator Generate a seeded HEX palette with fixed harmony rules, black-or-white text choices, and WCAG contrast checks for every color pair.
- Image Color Picker Pick colors from local images using exact coordinates and area averaging or median sampling, with alpha handling and reusable CSS tokens.
- WCAG 2.2 Accessibility Quiz Practise WCAG 2.2 through 38 original accessibility scenarios with sourced explanations of criterion boundaries and conformance levels.
- CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
White lettering on a bright brand color can still be difficult to read. A pale placeholder can disappear into an otherwise clear form. In both cases, the useful comparison is the difference in relative luminance between the foreground and the surface behind it. Different hues can have similar relative luminance, so choosing visibly different colors does not by itself establish sufficient contrast.
The Web Content Accessibility Guidelines (WCAG) 2.x express this comparison as a contrast ratio. Each color receives a relative luminance value calculated from its red, green and blue channels in the standard RGB (sRGB) color space, then the lighter and darker values are compared. The scale runs from 1:1 for equal luminance to 21:1 for black against white. These are calculated relationships between color values, not measurements of a monitor's brightness.
At Level AA, ordinary text needs at least 4.5:1, while qualifying large text needs at least 3:1. Level AAA requires stronger text contrast. The usual large-text cutoffs are 24 CSS pixels for regular text or 18⅔ CSS pixels for bold text; CSS pixels are the sizing units used in web styles. Size and weight determine the applicable requirement without changing the color ratio. A heading is not automatically large text, and making small text bold does not automatically qualify it for the lower threshold.
- Body text and placeholders. Paragraphs, form hints and placeholder text in active controls follow the text contrast requirements. A muted appearance or a secondary role does not create an exemption.
- Disabled controls. Text belonging to a genuinely inactive control is exempt from the text contrast criteria. An enabled control styled to look faint still needs to meet the applicable requirement.
- Icons and control states. An icon, boundary or state indicator needed to identify a control or understand information must be distinguishable from adjacent colors. Decorative lines and unnecessary borders do not all carry the same requirement.
- Text over brand colors. Ordinary button labels and headings still need sufficient contrast. The exemption for text within a logo or brand name does not extend to every use of the brand palette.
Keyboard focus introduces another comparison. An outline outside a button usually needs contrast with the surrounding surface; an indicator inside it needs contrast with the button interior. Testing the text against the button fill does not establish that the focus indicator is visible.
Transparency also changes the colors that reach the comparison. Alpha describes opacity, from completely transparent to fully opaque. A translucent foreground mixes with its background, and a translucent background mixes with the surface underneath. Reusing the same color values in a different theme can therefore change the contrast. Text over a photograph or gradient needs attention to the background immediately behind the letters, because one representative background color cannot describe the whole area.
WCAG 2 contrast is a luminance-based conformance calculation, not a complete perceptual model of readability. Typeface, stroke thickness and smoothing can affect how clear text looks without changing its specified color ratio. A useful design check combines the applicable numerical requirement with inspection of the actual text and controls, especially when the colors only just pass.
How to Use This Tool:
Start with the colors used for one text run, icon or control state. Results update as you edit the pair.
- Enter Foreground (text or icon) and Background as HEX, RGB or HSL (hue, saturation and lightness) values. The color pickers retain the opacity of a valid existing value.
If Check input appears, correct the value with an error message beneath its field. For example, replace the unsupported color name
redwith#FF0000. Valid pair results return automatically. - Choose the applicable Contrast requirement. This sets the headline verdict and the requirement used for suggestions and palette marks; the WCAG verdicts table still shows all five comparisons.
- Set Page backdrop override in Advanced when the background is translucent and sits over a color other than white. Leave it blank for white, or supply a fully opaque color matching the actual surface.
- Apply a proposed color from Passing colors if the pair fails. Suggestions change the foreground by default; Color to adjust in Advanced lets you choose the background instead. After applying a suggestion, confirm that Pair contrast passes the intended requirement.
For text-specific context, enter Font size (optional) in CSS pixels and choose Font weight in Advanced. These mark the relevant text-size rows without changing the selected requirement or headline verdict.
For a palette audit, paste 2 to 20 colors into Palette audit (optional), one per line, then open Palette matrix. Entries can be bare colors or named values such as ink: #1F2937 and --paper: #FFFFFF;. Correct any reported line errors to restore the matrix; an invalid palette does not hide a valid pair result.
The Contrast report provides the entered colors, resolved colors and verdicts for a design review. The Calculation method shows the arithmetic using the current values.
Interpreting Results:
A Pass applies to the selected numerical requirement for the supplied colors. Check that the requirement matches the actual content. The checker does not identify logos, inactive controls or other exceptions, and a passing pair does not establish that a whole page conforms to WCAG.
- Text context. Applies and Other text size identify rows relevant to the optional font information. With no size entered, both text sizes remain applicable and font weight has no effect. Entering a large size does not automatically switch the headline away from an ordinary-text requirement.
- Passing colors. Nearest means the smallest HSL lightness change among the offered passing colors. It does not mean the smallest perceived color difference. If no color on that path can pass, change the other color or opacity and recheck against the requirement that actually applies. A pair that already passes needs no suggestion.
- Palette matrix. Rows are foregrounds and columns are backgrounds. Every ordered pairing uses the same page backdrop and selected requirement, including each color paired with itself. Swapping opaque colors preserves the ratio; swapping translucent colors can change it. An opaque diagonal pair is 1:1, while two successive applications of the same translucent color can differ.
The Color preview uses fixed samples at 16 and 24 CSS pixels plus a graphic. The optional font information does not resize or reweight those samples. Inspect the actual typeface and states in the intended design before accepting a pair that looks marginal.
The Lightness sweep samples the chosen color every five HSL lightness points from 0% to 100%. Its connecting line helps locate promising regions; the separately checked suggestions provide the passing colors to apply.
Technical Details:
Contrast depends on the two colors after transparency is resolved. Their encoded sRGB channels are converted to linear-light values before calculating relative luminance. Averaging the original red, green and blue channel numbers would give a different quantity.
Formula Core
For a source color over an opaque base, each resulting channel is a weighted mixture. Alpha supplies the source's share, and the remaining share comes from the base.
Here, C is a red, green or blue channel on the 0 to 255 scale, and α is opacity from 0 to 1. First composite the background over the opaque page backdrop. Then composite the foreground over that resolved background. These mixtures use the encoded sRGB channel values, retaining fractional results. Relative luminance is calculated only after both colors have become opaque.
Divide each resolved channel C by 255 to obtain c, then undo the nonlinear sRGB encoding. The formula switches branches at the specified cutoff of 0.04045.
The linearized red, green and blue values become R, G and B in the luminance equation. The unequal weights account for their different contributions to sRGB relative luminance.
L is dimensionless, with black at 0 and white at 1. Calculate it for both resolved colors, then place the higher luminance in the numerator of the contrast ratio.
L₁ is the lighter resolved color's luminance, L₂ is the darker one's, and r is the dimensionless ratio shown as r:1. The fixed 0.05 terms are part of the WCAG definition. Foreground and background roles do not determine which luminance goes on top.
Thresholds and large text
Each boundary is inclusive. A pair passes when its full computed ratio is at least the required value. The text criteria cover text and images of text; non-text contrast applies to the visual information required to identify controls, their states and meaningful graphics.
| Success criterion | Level | Content | Minimum ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA, WCAG 2.1 and later | Required control and graphical information against adjacent colors | 3:1 |
WCAG defines large text using at least 18 pt, or 14 pt when bold, with equivalent sizes for Chinese, Japanese and Korean fonts. CSS defines 96 pixels and 72 points per inch, giving 24 CSS px for 18 pt and exactly 18⅔ CSS px for 14 pt. The checker uses 24 CSS px, or 18⅔ CSS px with Bold (700), as its numerical cutoffs. It does not assess typeface-specific equivalence, and user zoom does not change the original text-size classification.
Purely decorative text, text invisible to everyone and incidental text within a picture containing significant other content also have text-contrast exemptions. Non-text contrast has exceptions for inactive controls, unmodified browser-provided appearances and graphical presentations essential to the information. These are contextual judgments, not automatic outcomes of the ratio.
For authored focus indicators, SC 1.4.11 concerns contrast with adjacent colors. WCAG 2.2's separate AAA Focus Appearance criterion, SC 2.4.13, also evaluates indicator area and contrast between the same pixels before and after focus. A pair check does not establish those conditions or verify keyboard focus visibility and obstruction.
Precision at a passing boundary
WCAG requires comparison without rounding the calculated ratio to reach a threshold. For example, a ratio of 4.499:1 remains below 4.5:1. This checker truncates displayed ratios to two decimal places, so that value would appear as 4.49:1. Truncation is the display policy; the pass decision still uses the full computed value.
Fractional channels from HSL conversion and transparency remain unrounded during the pair calculation. Consequently, replacing a resolved fractional color with a nearby integer HEX value can change a result close to a threshold. The calculated luminance is relative to the sRGB reference, with no measurement of display brightness, ambient lighting or individual visual performance.
Color notation and input boundaries
HEX, RGB and HSL describe colors within the supported sRGB calculation. An HSL lightness percentage is a different quantity from relative luminance.
| Notation | Accepted forms | Channel rules |
|---|---|---|
| HEX | #RGB, #RGBA, #RRGGBB, #RRGGBBAA |
Alpha comes last when present. Short forms expand each digit twice. |
| RGB | rgb(31 41 55 / 80%) or rgba(31, 41, 55, 0.8) |
Channels from 0 to 255, or percentages from 0% to 100%. |
| HSL | hsl(220 40% 30% / 0.8) or hsla(220, 40%, 30%, 0.8) |
Hue as an angle; saturation and lightness from 0 to 100. |
RGB and HSL accept optional alpha from 0 to 1 or 0% to 100%; omitting it makes the color opaque. Space-separated RGB channels may mix numbers and percentages, while comma-separated RGB channels must use one kind throughout. Comma-separated HSL requires percentage saturation and lightness; space-separated HSL accepts either numbers or percentages. Hue accepts degrees, radians, gradians or turns, with unitless values treated as degrees and angles wrapped around the hue circle.
Out-of-range channels and alpha are rejected rather than silently clamped. CSS color keywords, including transparent, variable expressions and wide-gamut color functions are not resolved. Each color value accepts at most 200 characters. Optional font size accepts 1 to 300 CSS px; palettes accept at most 6,000 characters, with names limited to 60 characters.
How passing colors are found
A lightness adjustment searches toward both black and white while holding the chosen color's original HSL hue, saturation and alpha fixed. Each candidate is composited with the unchanged colors before testing contrast. Changing the background can also change the resolved appearance of a translucent foreground above it.
The proposed RGB channels are rounded to 8-bit integers and checked again. If that rounding produces a failure, the search moves far enough to return a passing value. Integer conversion can slightly shift the final hue or saturation. Candidates are ordered by the absolute change in HSL lightness on a 0 to 100 scale, so the nearest result is specific to this constrained adjustment. If neither the black nor white extreme passes at the retained alpha, no suggestion is returned.
A two-color calculation assumes uniform colors with ordinary alpha compositing. Gradients, image backgrounds, blend modes, group opacity, anti-aliased edges and thin-font rendering need separate inspection. Over a varying background, test the relevant colors behind the letters or provide a backing whose contrast remains sufficient across the text.
Privacy Notes:
Color parsing, contrast calculations, suggestions and palette comparisons run in your browser. They do not require a remote color-analysis service or camera, microphone or location permission. Copy actions place the chosen output on the clipboard when you invoke them.
Entered values can be carried in the page address for restoration, including the color pair, palette names and colors, backdrop, font size and weight, contrast requirement and color chosen for adjustment. Browser history, bookmarks and shared links can therefore retain those values. The optional chart also loads an external resource on demand, so local calculation does not imply that the page makes no network requests.
Worked Examples:
Gray body text just below AA
For Foreground (text or icon) #777777 on Background #FFFFFF, the gray channels are each 119 and their relative luminance is approximately 0.1844749945. White has luminance 1, giving a calculated ratio of approximately 4.47808945:1. The displayed 4.47:1 fails AA normal text, although it passes the 3:1 large-text requirement. With the foreground selected for adjustment, Passing colors offers #767676. Applying it produces approximately 4.54222496:1, displayed as 4.54:1, and passes AA normal text. It still falls short of AAA normal text's 7:1 requirement.
White text over a translucent dark background
Set the foreground to #FFFFFF and the background to rgb(0 0 0 / 50%). With the backdrop left blank, white is assumed underneath. Each background channel becomes 127.5, its relative luminance is approximately 0.2140411405, and the calculated ratio is approximately 3.97665302:1. The displayed 3.97:1 fails AA normal text. If the actual surface underneath is black, setting Page backdrop override to #000000 instead resolves the background to black and produces 21.00:1. The backdrop must describe the real surface; changing an assumption alone does not improve the original design.
References:
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024.
- Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C Web Accessibility Initiative, updated 6 September 2026.
- Understanding Success Criterion 1.4.11: Non-text Contrast, W3C Web Accessibility Initiative, updated 6 September 2026.
- Understanding Success Criterion 2.4.13: Focus Appearance, W3C Web Accessibility Initiative, updated 6 September 2026.
- Compositing and Blending Level 1: Simple Alpha Compositing, W3C Candidate Recommendation Draft, 21 March 2024.
- CSS Values and Units Module Level 4: Absolute Lengths, W3C Working Draft, 12 March 2024.
- CSS Color Module Level 4, W3C Candidate Recommendation Draft, 27 October 2026.
- Technique G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text, W3C Web Accessibility Initiative, updated 6 September 2026.