Insufficient color contrast

Scope. Every element that itself carries rendered, visible text (own non-empty text node; not display:none, visibility:hidden or visually hidden), in the top document, open shadow roots and frames.

Expectation. Fails when the contrast ratio between the text colour actually painted (-webkit-text-fill-color wins over color; a translucent foreground is composited) and the effective background is below 4.5:1, or below 3:1 for large text (at least 18pt = 24px, or 14pt = 18.66px bold). WCAG forbids rounding up: 4.48:1 fails, 2.96:1 fails for large text; 4.54:1 and 3.03:1 pass. Text that is not rendered or only visually hidden is not visible text and is not measured. Text under aria-hidden is still visible text and is measured (1.4.3 is about what is seen, not the accessibility tree). Text in a shadow root or a frame is part of the page. A viewport-specific colour counts in the viewport where it applies; a colour set by script after load counts as rendered. When the background cannot be resolved (gradient, background-clip:text, covered by an overlay) the rule does not guess: that is contrast/text-undetermined, never a pass or fail here.

When the page declares a dark colour scheme (@media (prefers-color-scheme: dark), a color-scheme naming dark) it is measured a second time with prefers-color-scheme: dark emulated, and what fails there is reported under this same id with the computed evidence attribute color_scheme: dark (#917). Text that passes on the default render but fails under the dark scheme (and the reverse) is judged per scheme; a failure that is identical in both schemes (same element, same colours) is one finding, not two. Only confirmed failures of the top document are carried over from the dark render.

Source. WCAG 2.2 SC 1.4.3 Contrast (Minimum); definitions 'contrast ratio', 'relative luminance', 'large scale (text)'

Detection: shared; needs dom, computed_style, geometry.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Low contrast text corpus case</title>
</head>
<body>
    <main>
        <h1>Low contrast body text</h1>
        <p style="color: #aaaaaa; background-color: #ffffff;">
            This paragraph uses light gray text on a white background, well below
            the 4.5:1 contrast ratio required for normal-size body text.
        </p>
    </main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Text fill color contrast corpus case</title>
    <style>
        body { background-color: #ffffff; color: #111111; }
        /* Glyphs are painted with -webkit-text-fill-color, not `color`. */
        .fill-faint { color: #111111; -webkit-text-fill-color: #aaaaaa; }
        .fill-dark { color: #aaaaaa; -webkit-text-fill-color: #111111; }
    </style>
</head>
<body>
    <main>
        <h1>Text fill color overrides color</h1>
        <p id="fill-faint" class="fill-faint">
            This paragraph declares dark text but paints its glyphs light gray
            through -webkit-text-fill-color, below the required 4.5:1 ratio.
        </p>
        <p id="fill-dark" class="fill-dark">
            This paragraph declares light gray text but paints its glyphs almost
            black through -webkit-text-fill-color, which passes comfortably.
        </p>
    </main>
</body>
</html>