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>Color Anti-Patterns — Should Flag vs Should Pass</title>
7 <style>
8 body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #1a1a1a; }
9 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
10 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
11 .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
12 .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }
13 </style>
14</head>
15<body>
16 <div class="grid">
17
18 <!-- ════════════════════════════════════════════════════════════
19 LEFT COLUMN: should flag
20 ═══════════════════════════════════════════════════════════ -->
21 <div class="col" data-col="flag">
22 <h2>Should flag</h2>
23
24 <h3>Pure black & white</h3>
25 <div class="card" style="background: #000000; color: white;">
26 <p>Pure #000 background</p>
27 </div>
28 <div class="card" style="background: #ffffff;">
29 <p style="color: #000000;">Pure #000 text on pure #fff background</p>
30 </div>
31
32 <h3>Gray on color</h3>
33 <div class="card" style="background: rgb(59, 130, 246);">
34 <p style="color: rgb(150, 150, 150);">Gray text on blue background</p>
35 </div>
36 <div class="card" style="background: rgb(16, 185, 129);">
37 <p style="color: rgb(180, 180, 180);">Gray text on green background</p>
38 </div>
39
40 <h3>Low contrast</h3>
41 <div class="card" style="background: white;">
42 <p style="color: rgb(200, 200, 200);">Light gray text on white — very low contrast</p>
43 </div>
44 <div class="card" style="background: rgb(30, 30, 30);">
45 <p style="color: rgb(80, 80, 80);">Dark gray text on near-black — low contrast</p>
46 </div>
47 <!-- Gradient background — gray heading is unreadable across every stop -->
48 <div class="card" style="background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); padding: 16px;">
49 <h1 style="color: #808080; font-size: 32px; font-weight: 800; margin: 0;">Welcome to Our Platform</h1>
50 <p style="color: #666666; font-size: 14px;">The best solution for modern teams and businesses</p>
51 </div>
52
53 <h3>Gradient text</h3>
54 <h3 style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem;">
55 Gradient Heading
56 </h3>
57
58 <h3>AI color palette</h3>
59 <h1 style="color: rgb(139, 92, 246); font-size: 1.5rem; margin: 0;">Purple heading text</h1>
60
61 <h3>Tailwind color anti-patterns</h3>
62 <div class="bg-black text-white p-4 rounded card" style="background: black; color: white;">
63 <p>bg-black — pure black bg</p>
64 </div>
65 <div class="bg-blue-500 text-gray-400 p-4 rounded card" style="background: rgb(59, 130, 246);">
66 <p style="color: rgb(156, 163, 175);">text-gray-400 on bg-blue-500 — gray on color</p>
67 </div>
68 <h3 class="text-purple-500 text-2xl font-bold" style="color: rgb(168, 85, 247); font-size: 1.5rem; font-weight: 700;">text-purple-500 heading</h3>
69 <div class="bg-gradient-to-r from-purple-500 to-indigo-500 text-white p-4 rounded card" style="background: linear-gradient(to right, rgb(168, 85, 247), rgb(99, 102, 241)); color: white;">
70 <p>Purple-to-indigo gradient</p>
71 </div>
72 </div>
73
74 <!-- ════════════════════════════════════════════════════════════
75 RIGHT COLUMN: should pass
76 ═══════════════════════════════════════════════════════════ -->
77 <div class="col" data-col="pass">
78 <h2>Should pass</h2>
79
80 <h3>Tinted neutrals</h3>
81 <div class="card" style="background: rgb(26, 26, 30);">
82 <p style="color: rgb(240, 240, 245);">Near-black bg, near-white text — tinted, not pure</p>
83 </div>
84 <div class="card" style="background: rgb(250, 250, 252);">
85 <p style="color: rgb(20, 20, 25);">Near-white bg, near-black text — good contrast, tinted</p>
86 </div>
87
88 <h3>Good contrast</h3>
89 <div class="card" style="background: rgb(30, 64, 175);">
90 <p style="color: rgb(240, 240, 245);">Near-white text on dark blue — high contrast, not pure white</p>
91 </div>
92 <div class="card" style="background: rgb(16, 185, 129);">
93 <p style="color: rgb(5, 46, 32);">Dark green text on green bg — same hue family</p>
94 </div>
95
96 <h3>Distinctive accents (not AI purple)</h3>
97 <h3 style="color: rgb(220, 38, 38); font-size: 1.25rem; margin: 0;">Red heading — not AI purple</h3>
98 <h3 style="color: rgb(180, 83, 9); font-size: 1.25rem; margin: 8px 0 0;">Amber heading — distinctive</h3>
99
100 <h3>Background-image url() ancestor (not low contrast)</h3>
101 <!-- White text on transparent bg where ancestor has a background-image.
102 The detector cannot determine the image color, so it must NOT assume
103 white and report a false low-contrast finding. -->
104 <div data-test="bg-image-ancestor" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=='); background-size: cover; padding: 20px;">
105 <p style="color: rgb(255, 255, 255); font-size: 16px;">White text on image background — should not flag low-contrast</p>
106 </div>
107
108 <h3>Tailwind opacity-modified bg-black (not pure black)</h3>
109 <!-- bg-black/N classes are NOT pure black — they apply an alpha modifier.
110 The detector must not match these as pure-black-white. -->
111 <div class="bg-black/3 p-4 rounded card" data-test="bg-black-opacity" style="background: rgba(0,0,0,0.03);">
112 <p>bg-black/3 — 3% opacity, not pure black</p>
113 </div>
114 <div class="hover:bg-black/5 p-4 rounded card" data-test="bg-black-hover-opacity" style="background: rgba(0,0,0,0);">
115 <p>hover:bg-black/5 — hover state, not pure black</p>
116 </div>
117 <div class="bg-black/50 p-4 rounded card" data-test="bg-black-half-opacity" style="background: rgba(0,0,0,0.5);">
118 <p style="color: white;">bg-black/50 — 50% opacity, not pure black</p>
119 </div>
120
121 <h3>Emoji on light backgrounds</h3>
122 <!-- Emojis render as multicolor glyphs regardless of CSS color, so the
123 CSS color is irrelevant for contrast. These should NOT be flagged. -->
124 <div class="card emoji-test" data-test="emoji-light" style="background: #ffe4e6;">
125 <p style="color: #ffe4e6; font-size: 24px;">⚠️ 🚨 ✨ 🎨</p>
126 </div>
127 <div class="card emoji-test" data-test="emoji-dark" style="background: #1a1a1a;">
128 <p style="color: #1a1a1a; font-size: 24px;">⚠️ 🚨 ✨ 🎨</p>
129 </div>
130 </div>
131 </div>
132 <script src="/js/detect-antipatterns-browser.js"></script>
133</body>
134</html>