Contrast ratio

Definition and context

Contrast ratio is a numeric measure of how different two colours appear in terms of lightness. It compares the relative luminance (perceived brightness) of a foreground and background colour and returns a ratio such as 4.5:1 or 7:1. In digital interfaces it is most often discussed for text, icons, focus indicators, and essential graphics, but it also matters when placing text or UI over photographs, video posters, gradients, and patterned surfaces.

In the context of web performance and image optimisation, contrast ratio helps determine whether content remains readable under different rendering conditions. Colour management, compression, and dithering can shift tones subtly; a design that passes contrast checks on a designer’s monitor can drift toward failure on another device or after an aggressive optimisation pass. Treating contrast as a quantifiable constraint reduces these risks and gives teams a shared threshold to design and test against.

Unlike subjective notions of “high contrast”, the ratios used on the web stem from a defined calculation and target readability for people with a wide range of vision. They are not a guarantee of perfect legibility in every situation; typography, size, weight, and line rendering also matter. However, the ratio provides a baseline that can be applied consistently across pages, themes (light/dark), and brand colour palettes. It becomes a design-system token that can be evaluated in code, in CI, and by automated accessibility testing tools.

How contrast ratio is measured

The classic WCAG method uses relative luminance derived from sRGB. First, colours are linearised from their sRGB gamma-encoded values. Relative luminance (L) is then computed as a weighted sum of linear R, G, and B channels (approximately 0.2126R + 0.7152G + 0.0722B). The contrast ratio between two colours is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour’s luminance and L2 is the darker’s. Results range from 1:1 (same colour) to 21:1 (white on black or vice versa).

Real-world implementations measure the computed colours that the browser paints, not the values authored in a design file. CSS can introduce opacity, blending, filters, gradients, and overlays that materially change the effective foreground and background. For text on images or video, the background under the text varies spatially, so testing must consider the worst-case region behind glyphs rather than a single flat colour. Tools often sample pixels or compute the background stack to arrive at an effective pair for comparison.

As CSS colour spaces expand (for example Display-P3), most contrast tools still evaluate using the WCAG’s sRGB-based method, which is acceptable when colours are mapped into sRGB for display. Perceptual models like APCA estimate readability differently and can yield different thresholds. Regardless of model, consistent testing requires the same colour space, gamma handling, and sampling method to avoid false positives or negatives when comparing results across tools or environments.

General role

Contrast affects readability, scanning speed, and error rates. Adequate ratios reduce cognitive load, which tends to reduce bounce and abandonment on text-heavy pages like articles, product descriptions, and help content. In commerce and sign-up flows, sufficient contrast on labels, inputs, and error messages helps users complete tasks correctly. These effects are particularly visible on small screens, outdoors, or when system colour inversions and high-contrast modes are enabled.

From an SEO and compliance perspective, many audit tools surface contrast failures. While contrast itself is not a direct ranking factor, poor legibility can degrade engagement signals and trigger accessibility issues that appear in Lighthouse, automated CI checks, or public sector conformance reports. For brands operating in regulated sectors, contrast targets are a non-negotiable quality gate across websites, native apps, and embedded web views.

In image optimisation workflows, contrast comes into play whenever text or iconography overlays media. Cropping, art direction, adaptive formats, and compression can change local backgrounds behind text, so designers often apply scrims (semi-transparent overlays) or solid chips to stabilise the effective contrast. Content-aware placement, background-blur layers, and dynamic theme tokens help ensure that contrast targets hold as images resize and sources switch across breakpoints and DPRs.

Accessibility compliance

WCAG 2.2 defines minimum contrast requirements for text (Success Criterion 1.4.3) and enhanced targets (1.4.6). Normal-weight body text must reach at least 4.5:1 against its background. Large-scale text—defined as regular-weight ≥18 pt (24 px) or bold ≥14 pt (≈18.66 px)—has a lower minimum of 3:1. Many teams adopt higher internal targets, such as 7:1 for core text, to provide margin across devices and lighting conditions and to better support low-vision users.

Non-text contrast (1.4.11) requires a 3:1 ratio for essential graphical objects and user interface components, including icons that convey meaning, form fields, and focus indicators. States and interactions matter: hover, active, and disabled variations should be compared against their backgrounds and adjacent colours. Focus indicators introduced or updated in WCAG 2.2 also imply sufficient visibility against surrounding content; using system outlines with adequate contrast often simplifies conformance.

Some content is exempt: purely decorative text, logotypes, and incidental text in photos need not meet text contrast criteria. However, if a logo doubles as the only way to identify a product or action in a UI, separate non-text contrast expectations still apply. Teams should document how exemptions are interpreted in their design system to avoid inconsistent calls during audits and to keep critical pathways, such as error messages or CTAs, clearly within scope of the stricter thresholds.

What contrast testing measures

Contrast testing evaluates the colour pair that the user actually sees. For text, that means the computed text colour against the computed backdrop directly beneath the glyphs, after opacity, gradients, filters, and overlaps are resolved. For icons and essential graphics, the relevant element and its immediate surrounding area are compared. This is a local measurement; the same text colour can pass on a flat background and fail over a busy image depending on the pixels sampled under the characters.

Automated tools approximate this by querying the DOM and CSSOM to compute effective colours, or by sampling the canvas after paint. Antialiasing complicates things: edge pixels blend foreground and background and may show lower local contrast than the interior of glyphs. Good practice is to test the solid body of characters rather than subpixel edges, and to consider bold or heavier weights for tiny text to offset rendering losses on some displays or at low contrast values near the threshold.

Testing does not capture every factor that influences readability. Letterforms, tracking, line length, user zoom, and motion can all affect the outcome. Nor does a passing ratio ensure legibility across changing backgrounds in a carousel or video. Where text sits over media, teams often enforce a darker or lighter scrim, pin the text to uniform regions, or render a solid background chip behind the label to transform a variable background into a known, testable one.

Threshold misconceptions: WCAG 2.2 sets 4.5:1 for “normal” text and 3:1 for “large” text (≥18 pt/24 px regular, or ≥14 pt/18.66 px bold). Designers often apply 3:1 to small body copy or forget that bolding can change the applicable threshold.

A frequent mistake is applying the 3:1 threshold to body copy simply because it is bold or appears prominent. The lower threshold only applies to text that is objectively “large” under WCAG definitions: regular ≥18 pt (24 px) or bold ≥14 pt (≈18.66 px). Bold 16 px body text is still considered normal text and must meet 4.5:1. Treating any bold label as “large” leads to systematic under-contrast in navigation, tables, and cards, particularly in dense UIs.

Another misconception is assuming that contrast requirements relax when the user zooms. WCAG testing evaluates content at 100% zoom, and designs should be compliant at default scale. Zoom is an accommodation, not a permission to ship low-contrast text. Similarly, light-on-dark text and dark-on-light text have symmetrical numeric requirements; reversing colours does not change the ratio, even though the subjective experience may differ for some users and environments.

There is also confusion between text contrast and non-text contrast. Icons that convey meaning, input borders, and focus rings fall under the 3:1 non-text criterion, not the 4.5:1 text criterion—unless they include text characters. Placeholders and helper text are text and must meet text contrast requirements. Finally, logotypes are exempt as text, but if a logo is used as an interactive control without an additional accessible name, its visibility as a UI component still needs consideration under non-text rules.

Implementation notes

Make contrast a first-class token in the design system: define approved foreground/background pairs and surface them as semantic variables (for example, text-primary on surface-default). Validate pairs against WCAG thresholds across both light and dark themes and include margins for overlays, opacity, and different font weights. Where branding colours struggle, provide alternative tints or supporting chips so text on brand backgrounds can meet minimums without compromising identity elements elsewhere.

Automate checks during development. Tools such as axe, pa11y, and Lighthouse can flag common failures on rendered pages. For components, unit tests can compute contrast by resolving computed styles in a headless browser and asserting ratios. Include interaction states and disabled styles, and test text over media with representative images at different crops. In build pipelines that optimise images, re-run spot checks to ensure compression, colour-profile conversion, or format changes have not shifted effective backgrounds below target ratios.

For text on images, stabilise the background. Techniques include applying a scrim (for example, a black or white overlay at 40–60% opacity), placing text in a solid chip, or anchoring text to areas with low variance using art direction. Avoid relying on text-shadow as a primary mechanism; it can help at the edges but does not increase the interior contrast of glyphs. Be cautious with mix-blend-mode and filters, which complicate computed colours and can produce inconsistent results across browsers and OS compositors.

Track future-facing models like APCA, which aim to reflect perceived contrast more accurately, especially for thin fonts and low-light scenarios. While WCAG 2.x conformance is based on the classic ratio, APCA can guide nuanced decisions in design reviews. Document how your team interprets both models to reduce confusion, and keep tooling aligned so designers, developers, and QA see the same pass/fail outcomes across platforms and viewports.

Comparisons

Contrast ratio vs APCA

The classic contrast ratio is a luminance-based, symmetric metric with fixed thresholds (for example, 4.5:1 and 3:1). APCA (Advanced Perceptual Contrast Algorithm) models perceived readability and produces asymmetric values that depend on text size, weight, and polarity (light-on-dark vs dark-on-light). APCA can flag cases where the classic ratio passes but thin, small text remains hard to read. However, WCAG 2.x conformance is still based on the classic ratio, so teams often use APCA as a supplementary design guide rather than a compliance gate.

Text contrast vs non-text contrast

Text contrast rules apply to characters and glyphs that form words, while non-text contrast covers icons, component boundaries, and graphical indicators. The minimums differ: 4.5:1 for normal text and 3:1 for large text, versus 3:1 for non-text UI and essential graphics. When an icon includes letters (for example, an initial in an avatar) or when an icon is the sole indicator of state, it should be evaluated carefully; use a solid background shape or stroke weight adjustments to meet the appropriate criterion.

sRGB-based ratios vs wide-gamut colour use

WCAG’s ratio uses sRGB luminance. With CSS Color 4 and wide-gamut spaces (for example Display-P3), colours may appear more saturated on capable displays, but contrast evaluation still typically converts to sRGB or linear RGB for the calculation. Teams adopting wide-gamut colours should verify contrast in the same colour space that users will effectively see in browsers and confirm tool support to avoid mismatches between design files and production rendering.

FAQs

Is contrast ratio a ranking factor for search?

Not directly. Contrast affects readability and engagement, and accessibility issues can surface in audits used by quality programs. Better legibility can improve user signals such as time on page and task completion, which correlates with stronger outcomes. For compliance-driven teams, passing contrast checks avoids avoidable blockers in procurement and public-sector standards that can influence visibility and credibility.

Do logos and decorative text need to meet 4.5:1?

Logotypes are exempt from the text contrast criterion in WCAG 2.x. Decorative text that conveys no information is also out of scope. However, if a logo functions as a control or the sole label for a feature, its visibility as a UI component still matters under non-text contrast rules. When in doubt, provide an accessible name and ensure any interactive affordances (focus, hover) maintain sufficient visibility against the page background.

How should text over photos or video be tested for contrast?

Test against the worst-case area behind the text, not just an average colour. Stabilise backgrounds with a scrim or solid chip, and consider content-aware placement to keep text over uniform regions. If media crops or changes across breakpoints, validate each variant. Automated tests can render representative frames and sample the region behind glyphs; manual spot checks remain valuable for highly variable or dynamic imagery such as video thumbnails and hero carousels.

Does dark mode change the required ratio or calculation?

No. The same numeric thresholds apply in dark and light themes, and the classic ratio is symmetric with respect to polarity. That said, some users perceive light-on-dark text differently, particularly at very high contrast. Provide adequate spacing and font weight, avoid extremely thin fonts, and ensure focus indicators and disabled states maintain visibility in both themes without relying on colour alone.

Does display density (Retina) or DPI affect contrast ratio requirements?

The numeric requirement does not change with pixel density. High-DPI displays can render edges more crisply, which may improve perceived legibility near thresholds, but the underlying ratio is the same. Font choice, weight, and size have a larger impact than DPI on readability at a given contrast level. Testing across representative devices remains worthwhile to catch antialiasing differences at small sizes.