1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Visual Contrast Fixture</title>
7 <style>
8 :root {
9 --paper: #f7f3ee;
10 --ink: #171717;
11 --muted: #566174;
12 }
13
14 body {
15 margin: 0;
16 padding: 32px;
17 background: var(--paper);
18 color: var(--ink);
19 font-family: system-ui, sans-serif;
20 }
21
22 .grid {
23 display: grid;
24 grid-template-columns: repeat(2, minmax(0, 1fr));
25 gap: 24px;
26 max-width: 980px;
27 margin: 0 auto;
28 }
29
30 .column {
31 display: grid;
32 gap: 14px;
33 }
34
35 .column > h2 {
36 margin: 0 0 2px;
37 color: var(--muted);
38 font-size: 13px;
39 font-weight: 700;
40 letter-spacing: 0.08em;
41 line-height: 1.4;
42 text-transform: uppercase;
43 }
44
45 .image-card {
46 position: relative;
47 display: grid;
48 align-content: end;
49 min-height: 180px;
50 padding: 28px;
51 border-radius: 8px;
52 overflow: hidden;
53 background-size: cover;
54 background-position: center;
55 }
56
57 .image-card p {
58 position: relative;
59 z-index: 1;
60 max-width: 28ch;
61 margin: 0;
62 font-size: 18px;
63 font-weight: 700;
64 line-height: 1.45;
65 }
66
67 .light-image {
68 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23ece8df'/%3E%3Ccircle cx='308' cy='58' r='132' fill='%23faf7f0'/%3E%3Cpath d='M0 186c52-22 92-26 142-8s98 18 148-8 92-22 130 0v70H0z' fill='%23f5efe4'/%3E%3C/svg%3E");
69 }
70
71 .pale-pattern {
72 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23edf2f7'/%3E%3Cg fill='%23f8fafc'%3E%3Ccircle cx='60' cy='64' r='42'/%3E%3Ccircle cx='182' cy='142' r='58'/%3E%3Ccircle cx='336' cy='84' r='74'/%3E%3C/g%3E%3Cg stroke='%23dbe4ef' stroke-width='14' opacity='.55'%3E%3Cpath d='M-20 220C74 112 150 94 232 164s138 46 214-62' fill='none'/%3E%3C/g%3E%3C/svg%3E");
73 }
74
75 .mist-image {
76 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23b9c4cf'/%3E%3Cpath d='M0 52c74-28 138-22 194 18s124 38 226-28v198H0z' fill='%23cbd3dc'/%3E%3Ccircle cx='82' cy='176' r='68' fill='%23aeb8c4'/%3E%3C/svg%3E");
77 }
78
79 .dark-image {
80 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23191b20'/%3E%3Ccircle cx='316' cy='50' r='132' fill='%232d3440'/%3E%3Cpath d='M0 182c70-48 138-42 204-6s128 24 216-58v122H0z' fill='%23101318'/%3E%3C/svg%3E");
81 }
82
83 .underlay {
84 isolation: isolate;
85 background: #1a1d24;
86 }
87
88 .underlay.light-shell {
89 background: #f5f2ea;
90 }
91
92 .underlay img,
93 .underlay svg {
94 position: absolute;
95 inset: 0;
96 z-index: 0;
97 width: 100%;
98 height: 100%;
99 object-fit: cover;
100 }
101
102 .underlay svg {
103 display: block;
104 }
105 </style>
106</head>
107<body>
108 <main class="grid">
109 <section class="column" data-col="flag">
110 <h2>Should flag after pixel sampling</h2>
111
112 <article class="image-card light-image">
113 <p style="color: rgb(255, 255, 255);">White text on light image should be sampled by pixel contrast.</p>
114 </article>
115
116 <article class="image-card dark-image">
117 <p style="color: rgb(28, 30, 35);">Dark text on dark image should be sampled by pixel contrast.</p>
118 </article>
119
120 <article class="image-card pale-pattern">
121 <p style="color: rgba(255, 255, 255, 0.72);">Translucent white text on a pale pattern should use rendered pixels.</p>
122 </article>
123
124 <article class="image-card mist-image">
125 <p style="color: rgb(138, 146, 156);">Muted gray text on a misty image should be sampled by pixel contrast.</p>
126 </article>
127 </section>
128
129 <section class="column" data-col="pass">
130 <h2>Should pass after pixel sampling</h2>
131
132 <article class="image-card dark-image">
133 <p style="color: rgb(250, 247, 239);">White text on dark image should pass the pixel contrast fallback.</p>
134 </article>
135
136 <article class="image-card light-image">
137 <p style="color: rgb(31, 35, 42);">Dark text on light image should pass the pixel contrast fallback.</p>
138 </article>
139
140 <article class="image-card underlay">
141 <img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23141920'/%3E%3Ccircle cx='318' cy='70' r='126' fill='%23293442'/%3E%3C/svg%3E">
142 <p style="color: rgb(246, 242, 232);">White text over a dark image underlay should pass.</p>
143 </article>
144
145 <article class="image-card underlay light-shell">
146 <svg viewBox="0 0 420 240" aria-hidden="true">
147 <rect width="420" height="240" fill="#f3eee4"></rect>
148 <circle cx="86" cy="70" r="68" fill="#fffaf2"></circle>
149 <path d="M0 176c72-24 132-22 190 6s128 30 230-34v92H0z" fill="#e5dccd"></path>
150 </svg>
151 <p style="color: rgb(35, 31, 27);">Dark text over a light SVG underlay should pass.</p>
152 </article>
153 </section>
154 </main>
155</body>
156</html>