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>Anti-Pattern: Bad Contrast Choices</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', sans-serif;
17 min-height: 100vh;
18 background: #1e1e1e;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 overflow: hidden;
33 }
34
35 /* Header with gray text on colored bg - BAD */
36 .header {
37 text-align: center;
38 margin-bottom: 40px;
39 }
40
41 .header h1 {
42 font-size: 48px;
43 font-weight: 800;
44 color: #808080; /* Gray on blue/purple - very hard to read */
45 margin-bottom: 12px;
46 }
47
48 .header p {
49 font-size: 18px;
50 color: #666666; /* Even worse gray */
51 }
52
53 /* Colored cards with gray bg labels - THE PROBLEM */
54 .cards {
55 display: grid;
56 grid-template-columns: repeat(3, 1fr);
57 gap: 20px;
58 margin-bottom: 32px;
59 }
60
61 .card {
62 border-radius: 16px;
63 padding: 24px;
64 color: white;
65 }
66
67 .card.blue { background: #2563eb; }
68 .card.green { background: #16a34a; }
69 .card.orange { background: #ea580c; }
70
71 /* Gray background labels on colored cards - looks terrible */
72 .card-label {
73 display: inline-block;
74 background: #9ca3af; /* Gray bg on colored card */
75 color: #4b5563; /* Gray text on gray bg */
76 padding: 4px 10px;
77 border-radius: 4px;
78 font-size: 11px;
79 font-weight: 600;
80 text-transform: uppercase;
81 letter-spacing: 0.5px;
82 margin-bottom: 12px;
83 }
84
85 .card-icon {
86 font-size: 28px;
87 margin-bottom: 12px;
88 }
89
90 .card h3 {
91 font-size: 18px;
92 font-weight: 700;
93 color: #ffffff; /* Pure white - harsh */
94 margin-bottom: 8px;
95 }
96
97 .card p {
98 font-size: 14px;
99 color: #555555; /* Dark gray on colored bg - hard to read */
100 line-height: 1.5;
101 }
102
103 /* Stats section with absolute black bg */
104 .stats {
105 background: #000000; /* Absolute black */
106 border-radius: 16px;
107 padding: 32px;
108 display: flex;
109 justify-content: space-around;
110 margin-bottom: 32px;
111 }
112
113 .stat {
114 text-align: center;
115 }
116
117 .stat-value {
118 font-size: 36px;
119 font-weight: 800;
120 color: #ffffff; /* Pure white */
121 }
122
123 .stat-label {
124 font-size: 14px;
125 color: #444444; /* Dark gray on black - nearly invisible */
126 }
127
128 /* Footer area */
129 .footer {
130 background: #f0f0f0; /* Light gray bg */
131 border-radius: 16px;
132 padding: 28px;
133 display: flex;
134 justify-content: space-between;
135 align-items: center;
136 }
137
138 .footer-text {
139 color: #a0a0a0; /* Gray text on gray bg - no contrast */
140 font-size: 14px;
141 }
142
143 .footer-btn {
144 background: #ffffff; /* Pure white btn */
145 color: #000000; /* Pure black text */
146 padding: 12px 24px;
147 border-radius: 8px;
148 font-weight: 600;
149 font-size: 14px;
150 border: none;
151 }
152
153
154 </style>
155</head>
156<body>
157 <div class="container">
158 <div class="header">
159 <h1>Welcome to Our Platform</h1>
160 <p>The best solution for modern teams and businesses</p>
161 </div>
162
163 <div class="cards">
164 <div class="card blue">
165 <span class="card-label">Popular</span>
166 <div class="card-icon">⚡</div>
167 <h3>Fast Performance</h3>
168 <p>Built for speed with optimized code and efficient algorithms.</p>
169 </div>
170 <div class="card green">
171 <span class="card-label">New</span>
172 <div class="card-icon">🔒</div>
173 <h3>Secure & Safe</h3>
174 <p>Enterprise-grade security with encrypted data storage.</p>
175 </div>
176 <div class="card orange">
177 <span class="card-label">Featured</span>
178 <div class="card-icon">📊</div>
179 <h3>Analytics</h3>
180 <p>Powerful insights to help you make better decisions.</p>
181 </div>
182 </div>
183
184 <div class="stats">
185 <div class="stat">
186 <div class="stat-value">10K+</div>
187 <div class="stat-label">Active Users</div>
188 </div>
189 <div class="stat">
190 <div class="stat-value">99.9%</div>
191 <div class="stat-label">Uptime Guaranteed</div>
192 </div>
193 <div class="stat">
194 <div class="stat-value">50M+</div>
195 <div class="stat-label">Data Processed</div>
196 </div>
197 </div>
198
199 <div class="footer">
200 <span class="footer-text">Ready to get started? Sign up today and join thousands of happy users.</span>
201 <button class="footer-btn">Get Started</button>
202 </div>
203
204 </div>
205<script src="/js/detect-antipatterns-browser.js"></script>
206</body>
207</html>