THE METHOD, MADE CLEAR
What this pair
can tell you.
Contrastclear calculates one text-colour contrast ratio from two opaque sRGB HEX values. It makes the formula, threshold choices and input limitations visible so the number can be used with its proper scope.
Start with the actual pair
Enter the foreground used for the text and the background immediately behind it. The two text fields accept three or six hexadecimal digits, optionally beginning with #. Letters can be upper- or lower-case. A value such as #369 expands by repeating each digit to become #336699; it is not the much darker value #000369.
The visual colour controls offer another way to change these same HEX values. Valid shorthand remains usable even when the result displays its expanded form. When an edit temporarily produces an incomplete value, the previous ratio and preview are cleared. The tool does not keep showing an earlier successful colour while labelling it as the new input.
How the ratio is calculated
The WCAG 2.2 relative-luminance definition supplies the sRGB model. Each 8-bit channel is divided by 255. For a normalised channel c, its linear value is c ÷ 12.92 when c is at most 0.04045; otherwise it is ((c + 0.055) ÷ 1.055)2.4.
L = 0.2126 R + 0.7152 G + 0.0722 B
Contrast = (lighter L + 0.05) ÷ (darker L + 0.05)
R, G and B in that weighted sum are the linear channel values. The result is a dimensionless ratio, conventionally written against 1. The calculator implements this model directly; it does not estimate brightness by averaging the original red, green and blue digits.
Reading the threshold table
W3C’s explanation of Contrast (Minimum) describes the AA text thresholds: at least 4.5:1 for normal text and 3:1 for large text. Contrast (Enhanced) describes the AAA thresholds of 7:1 and 4.5:1 respectively. The table reports each comparison separately; a pair may meet a large-text threshold while falling below the normal-text threshold.
“Meets” in this tool means the computed pair reaches the stated numerical threshold. It does not mean a document, website, design system or product conforms to a WCAG level. The tool does not evaluate where the colours are used or whether any criterion exceptions apply.
Worked example: black and white
#000000 text on #FFFFFF
Black has relative luminance 0 and white has relative luminance 1 in this model. The ratio is (1 + 0.05) ÷ (0 + 0.05) = 21:1. All four text-ratio comparisons in the table are met.
Use Swap colours to make white the foreground and black the background. The ratio stays 21:1 because the calculation always divides the lighter adjusted luminance by the darker one. The preview changes appearance, while the arithmetic is symmetric.
Worked example: two nearby greys
#777777 on white produces approximately 4.478089:1. The headline shows 4.48:1. It is below the normal-text AA threshold but above the large-text AA threshold. Changing the foreground to #767676 produces approximately 4.542225:1, which is above normal-text AA. That pair still falls below the 7:1 normal-text AAA threshold.
These examples describe specified colour values rather than a screenshot measurement. They are useful sanity checks: entering #777 or #777777 gives the same first result, and swapping either pair must preserve its ratio. They do not identify a universally suitable grey for every font or use.
Do not round a decision upward
The tool compares the unrounded computed value with each threshold. W3C’s minimum-contrast guidance explicitly treats these as cutoffs, rather than rounded targets. A mathematical ratio of 4.499:1 remains below 4.5:1 even though two-decimal formatting would show 4.50.
Open “Show computed precision” when investigating a boundary. Copy report and Download text preserve the underlying JavaScript number in their report. That number is a finite-precision numerical calculation, not a promise of an exact real-number expression, and display formatting never changes the status comparisons.
What the preview presets mean
The presets show 16 CSS pixels regular, 24 CSS pixels regular and 20 CSS pixels bold. W3C defines large text using 18-point regular or 14-point bold text, with equivalent sizing for relevant fonts. CSS absolute-unit relationships make 18 points equal 24 CSS pixels and 14 points equal 18⅔ CSS pixels. The 20-pixel bold preset therefore sits above that nominal bold cutoff.
Changing the preset affects the sample’s size and weight, along with the selected-preset threshold explanation. It cannot change the ratio of two unchanged colours. Verify the font and delivered size in the actual design before choosing a large-text category. The sample uses this device’s system font and is not a font-matching service.
Opaque colours only
This calculator rejects four- and eight-digit HEX values, including values that carry alpha. It also rejects rgb(), colour names, CSS variables and wide-gamut colour syntax. Those formats are outside this version’s input model, rather than errors to guess around. If text or background is translucent, first determine the actual composited colour against the relevant surface using an appropriate method.
Background images, gradients and video can put different colours behind different letters. One manually selected pair cannot describe every such position. Shadows, outlines, overlays and state changes can also alter what is being evaluated. Contrastclear does not scan a page, sample pixels, inspect styles or select the worst-case background for you.
Save the pair without an account
Copy report produces a text record with both canonical HEX colours, the preview preset, the computed ratio, the four threshold comparisons and the model limits. If clipboard access is unavailable, a selectable text box provides the same report. Download text writes that report to your device.
Get colour link creates a URL containing the foreground, background and preset. It does not send a message or publish the pair anywhere. The link can restore those inputs when opened. Its values are visible to anyone who receives the link and may be included in technical hosting requests. Avoid adding private information to a URL; this tool has no field for project or client names.
Restore example returns to dark #1F2937 text on white with the body-text preset. A malformed shared link clears usable results and explains the problem. You can restore the example or enter a new pair. Nothing is automatically stored as a recent colour history.
Use the number as one check
Keep the exported pair with the design context where it will be used, then inspect that actual text and its states. A threshold result does not review keyboard operation, labels, structure, layout, reflow, content or complete user tasks. This tool makes one calculation reproducible; broader accessibility evaluation remains a separate process.