WCAG 1.4.3: Contrast (Minimum)

What This Rule Means

WCAG 1.4.3 — Contrast (Minimum) is a Level AA success criterion under Guideline 1.4 (Distinguishable) of the Web Content Accessibility Guidelines 2.2. It mandates that the visual presentation of text and images of text maintains a sufficient luminance contrast ratio against their background so that people with moderately low vision can read the content without relying on contrast-enhancing assistive technology.

The required contrast ratios are as follows. Normal text — any text smaller than 18 point (approximately 24 CSS pixels) or 14 point bold (approximately 18.67 CSS pixels) — must achieve a contrast ratio of at least 4.5:1. Large text, defined as text at or above 18 point regular weight or 14 point bold weight, requires a minimum contrast ratio of 3:1. The same thresholds apply to images of text: rasterized or vector images that render readable characters must also meet these ratios relative to any adjacent background color.

Contrast ratio is calculated using the relative luminance formula defined in the WCAG specification. Relative luminance (L) is computed from sRGB color values after gamma correction, and the ratio is expressed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminance values and L2 is the darker. A ratio of 1:1 means no contrast at all (identical colors), while 21:1 is the maximum, achieved only by pure black on pure white.

The criterion covers all foreground text rendered by the browser, including text inside buttons, links, labels, form fields, table cells, tooltips, placeholder text inside inputs, and text overlaid on images or gradients. It also covers SVG text elements and text rendered via CSS-generated content (::before and ::after pseudo-elements).

WCAG 1.4.3 defines several official exceptions that are explicitly excluded from the requirement:

• Incidental text: Text or images of text that are purely decorative, are not visible, or form part of an inactive (disabled) user interface component are exempt. For example, the dimmed label of a disabled form field does not need to meet the ratio.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement, because brand identity often depends on specific color choices and users are expected to recognize logos visually.
• Large text: As noted above, large text has a relaxed ratio of 3:1 rather than 4.5:1, acknowledging that larger letterforms are easier to discern at lower contrast.

A pass occurs when the computed contrast ratio equals or exceeds the applicable threshold for every piece of visible, non-exempt text. A fail occurs when any visible, non-exempt text or image of text falls below the threshold, even by a fraction of a ratio point.

Why It Matters

Approximately 2.2 billion people worldwide live with some form of vision impairment, according to the World Health Organization. A significant subset of these individuals — including people with low vision conditions such as cataracts, glaucoma, macular degeneration, and diabetic retinopathy — can still read text on screen when contrast is sufficient, but struggle or fail entirely when contrast is poor. Contrast (Minimum) directly addresses the needs of this population by setting a measurable, testable floor below which text becomes inaccessible.

Beyond diagnosed low vision, an estimated 8% of men and 0.5% of women of Northern European descent experience some form of color vision deficiency (color blindness). Although color blindness is distinct from low contrast, many forms of color blindness reduce the perceived luminance difference between certain hues, making inadequate contrast even more problematic. A red label on a green background might appear as nearly uniform gray to someone with deuteranopia, rendering the text invisible if the underlying luminance contrast is insufficient.

Older adults are disproportionately affected. The aging eye loses contrast sensitivity, and pupil size decreases, reducing the amount of light that reaches the retina. A person in their seventies may need significantly higher luminance contrast to achieve the same readability as a person in their thirties, even without a clinical diagnosis of low vision.

Consider a concrete real-world scenario: a Turkish e-commerce website uses light gray text (#999999) on a white background (#FFFFFF) for product descriptions and pricing information — a common design trend favored for its minimalist aesthetic. The contrast ratio of this combination is approximately 2.85:1, well below the 4.5:1 threshold. A user with early-stage macular degeneration may be completely unable to read the price of a product, forcing them to abandon the purchase. Not only does this exclude a user from a fundamental commercial transaction, but it also represents a direct revenue loss for the merchant and a legal exposure in jurisdictions that mandate accessibility compliance.

From a usability and SEO standpoint, high-contrast text benefits all users in challenging environments: bright sunlight on a mobile screen, low-quality display panels, or simply a user who has not calibrated their monitor. Accessible color choices reduce eye strain for sighted users during extended reading sessions, and readability improvements correlate with lower bounce rates and longer time-on-page — signals that search engines use as quality indicators.

Related Axe-core Rules

• color-contrast: This is the primary automated rule enforcing WCAG 1.4.3 at Level AA. The axe-core engine computes the foreground and background colors of every text node in the DOM, resolving CSS cascade, opacity, z-index stacking, and alpha transparency. It flags any text element whose contrast ratio falls below 4.5:1 for normal text or 3:1 for large text. The rule reports the actual ratio found, the required ratio, and the specific element that failed, making remediation straightforward. However, axe-core can only analyze colors it can determine from computed styles; text rendered inside <canvas>, over complex CSS gradients, or on top of background images may not be fully resolvable without additional context, and axe will mark those cases as "needs review" rather than a definitive pass or fail. Placeholder text in form inputs is also checked by this rule.
• color-contrast-enhanced: This rule enforces the stricter WCAG 1.4.6 — Contrast (Enhanced) thresholds of 7:1 for normal text and 4.5:1 for large text (Level AAA). Although 1.4.6 is not required for AA conformance, running this rule during development is valuable for teams aiming for enhanced accessibility or preparing for regulatory environments that may adopt AAA requirements. Axe-core reports violations of this rule separately so teams can triage AA failures (color-contrast) versus aspirational AAA improvements (color-contrast-enhanced).

Manual testing is required in several scenarios automated tools cannot fully resolve. When text is overlaid on a background image or CSS gradient, the effective background color varies across the text bounding box. Automated tools must either sample the dominant color, assume the worst-case region, or defer to a manual reviewer. Similarly, text inside <canvas> elements is rendered as pixels with no semantic color information available to the accessibility tree, so manual inspection with an eyedropper tool is the only reliable approach. Text that appears only on :hover or :focus states may also require manual interaction to trigger before automated tools can evaluate it.

How to Test

1. Automated scan with axe DevTools: Install the axe DevTools browser extension (available for Chrome, Firefox, and Edge). Navigate to the page under test, open the extension panel, and run a full-page analysis. In the results panel, filter by the rule IDs color-contrast and color-contrast-enhanced. For each violation, the tool highlights the failing element, reports the actual contrast ratio (e.g., "2.85:1"), the required ratio (e.g., "4.5:1"), and the computed foreground and background colors in hex. Export the results as CSV or JSON for tracking. Repeat on all breakpoints, because responsive layouts may change font sizes (affecting the large-text threshold) or swap color schemes.
2. Lighthouse audit: Open Chrome DevTools, navigate to the Lighthouse tab, select "Accessibility," and run the audit. Lighthouse surfaces color-contrast violations in its Accessibility section with element references. Note that Lighthouse uses an older version of axe-core in some environments; axe DevTools directly may catch more issues.
3. Manual contrast measurement: Use the browser's built-in DevTools color picker or a dedicated tool such as the WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) or the TPGi Colour Contrast Analyser desktop application. Select the foreground and background colors with the eyedropper, and verify the reported ratio meets the threshold. For text on gradients or images, sample multiple points across the text area and use the lowest-contrast measurement as the definitive value.
4. Interactive state testing: Manually trigger :hover, :focus, :active, and :visited states on links and interactive elements, then measure contrast for each state separately. Some designs use lower-contrast hover colors that inadvertently fail. Use the browser DevTools "Force element state" feature to hold a state while measuring.
5. Screen reader and keyboard review (contextual): While contrast is a visual criterion and not directly detectable by screen readers, testing with NVDA + Firefox, VoiceOver + Safari, or JAWS + Chrome confirms that text is present in the accessibility tree and is not hidden via CSS techniques (such as color: transparent) that would make it visually inaccessible. If a screen reader announces text that appears invisible on screen, investigate whether the visual rendering meets contrast requirements for sighted users.
6. Zoom and font scaling: Increase the browser's default font size (Settings → Appearance → Font size) and zoom to 200%. Verify that text that transitions from "normal" to "large" at these sizes still meets the appropriate threshold. A font that is 14px at default zoom may become 28px at 200% zoom, changing which threshold applies.

How to Fix

Body text with insufficient contrast — Incorrect

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Body text with insufficient contrast — Correct

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Call-to-action button with low contrast — Incorrect

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Call-to-action button with low contrast — Correct

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Placeholder text in form input — Incorrect

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Placeholder text in form input — Correct

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Text on a background image or gradient — Incorrect

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Text on a background image or gradient — Correct

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Common Mistakes

• Assuming a color looks fine on your calibrated monitor: High-end displays with wide color gamuts and high brightness can make low-contrast combinations appear readable to designers with normal vision in a controlled environment, while the same text is illegible on a budget laptop screen or under office fluorescent lighting. Always verify with a contrast ratio tool, not visual judgment alone.
• Forgetting to test interactive states separately: A link may pass at 4.5:1 in its default state but drop to 2.8:1 on :hover when the color lightens. Each interactive state must independently meet the threshold.
• Treating disabled form fields as universally exempt: The exemption applies only to inactive UI components. If a field is visually styled as disabled but is still programmatically enabled (missing the disabled attribute), it is not exempt and must meet contrast requirements.
• Using opacity to dim text without accounting for the effective color: Setting opacity: 0.5 on dark text effectively blends it with the background, producing a lighter composite color. The contrast ratio must be calculated against the resulting composite color, not the original CSS value. For example, #000000 at 50% opacity on white renders as approximately #808080, which has a contrast ratio of roughly 3.9:1 — below the 4.5:1 threshold for normal text.
• Overlooking text inside SVG elements: SVG <text> elements styled with fill rather than CSS color are still subject to 1.4.3. Automated tools may miss these depending on how the SVG is embedded (inline vs. <img> vs. <object>). Inline SVG is the most reliably testable approach.
• Misidentifying text size for the large-text exemption: The 18pt / 14pt bold thresholds refer to the rendered size in the user's browser, not the CSS pixel value in the source. CSS font-size: 24px equals exactly 18pt (since 1pt = 1.333px), but if the user has set a larger default font size, a 16px element might render larger than 18pt. Test at default browser font sizes and check your size calculations carefully.
• Relying solely on color to distinguish linked text from body text: If a link is styled without underline and uses only color to differentiate it from surrounding text, the link color must achieve 3:1 against the body text color in addition to 4.5:1 against the page background. Many designs fail one or both of these requirements. Adding underlines (or another non-color visual indicator) is the safer approach.
• Ignoring text inside third-party widgets and chat plugins: Embedded widgets — live chat windows, cookie consent banners, review carousels, social media feeds — are part of the page and are in scope for WCAG 1.4.3 compliance. Low-contrast text inside a third-party widget is a failure even if your own codebase is fully compliant.
• Not re-testing after dark mode or high-contrast mode is activated: A color scheme that passes in light mode may fail in dark mode if CSS custom properties are not carefully managed. Similarly, Windows High Contrast Mode overrides many CSS color declarations; verify that text remains legible and that no custom CSS inadvertently re-introduces low-contrast pairs in forced-color environments.
• Using CSS background-clip: text or gradient text techniques without a fallback: Gradient-filled text created via -webkit-background-clip: text; color: transparent presents a complex contrast challenge because the text color varies across the glyph. Automated tools typically cannot resolve this, and the actual luminance of each part of the letterform must be manually verified against the page background.

Relation to Turkey's Accessibility Regulations

Turkey's Presidential Circular No. 2025/10, published in the Official Gazette (Resmî Gazete) No. 32933 on 21 June 2025, establishes a binding national framework for digital accessibility. The Circular mandates conformance with internationally recognised web accessibility standards — effectively aligning Turkish regulatory requirements with WCAG 2.2 — and introduces the Erişilebilirlik Logosu (Accessibility Logo), issued by the Ministry of Family and Social Services (Aile ve Sosyal Hizmetler Bakanlığı), as the official certification mark for conforming digital products and services.

WCAG 1.4.3 — Contrast (Minimum) is a Level AA success criterion, and Level AA conformance is the baseline required to qualify for the Accessibility Logo. This means that any entity pursuing the logo must ensure all visible, non-exempt text and images of text on their websites and applications meet the 4.5:1 (normal text) and 3:1 (large text) contrast thresholds defined by this criterion. Failure to meet 1.4.3 is one of the most commonly detected automated violations and would be a direct barrier to certification.

The Circular applies to a broad range of private and public sector entities. Covered entities include public institutions and agencies at the central and local government level; banks and financial institutions regulated by the Banking Regulation and Supervision Agency (BDDK); hospitals and healthcare providers, both public and private; telecom operators with 200,000 or more subscribers; e-commerce platforms that meet applicable revenue or transaction volume thresholds; travel agencies; private transport companies; and private schools and educational institutions authorized by the Ministry of National Education (MEB).

For these entities, addressing contrast compliance is not merely a best-practice recommendation — it carries regulatory weight. Non-compliant organizations risk administrative scrutiny and reputational consequences, while compliant organizations can display the Erişilebilirlik Logosu as a trust signal to the approximately 8.5 million people with disabilities in Turkey, as well as to older users, mobile users, and the general public who benefit from readable, high-contrast design.

Organizations operating in Turkey that have not yet conducted a WCAG 1.4.3 audit should prioritize automated scanning of all public-facing digital touchpoints — web, mobile web, and native applications where applicable — followed by manual review of gradient backgrounds, image overlays, and third-party embedded components. Establishing a design token system with pre-approved, contrast-verified color pairs is the most scalable long-term solution, ensuring that new UI components inherit accessible color combinations by default and that future redesigns do not inadvertently introduce contrast failures.