testWebsite/page7.html at master · rohitsahu-bstack/testWebsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WCAG AA Color Contrast Compliance Examples</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        background-color: #f9f9f9;
      }

      h1 {
        text-align: center;
        margin-bottom: 10px;
      }

      h2 {
        margin-top: 40px;
        border-bottom: 2px solid #ccc;
        padding-bottom: 5px;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

      .example {
        flex: 1 1 45%;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: relative;
        color: white;
      }

      .fail-aa-normal {
        background-color: #cccccc; /* Light Gray */
        color: #f3f3f3; /* Very Light Gray */
        padding: 15px;
      }

      .pass-aa-normal {
        background-color: #ffffff; /* White */
        color: #000000; /* Black */
        padding: 15px;
      }

      .fail-aa-large {
        background-color: #ffea00; /* Yellow */
        color: #ffeb3b; /* Light Yellow */
        padding: 15px;
        font-size: 1.5em; /* Large Text */
      }

      .pass-aa-large {
        background-color: #282828; /* Dark Gray */
        color: #ffea00; /* Yellow */
        padding: 15px;
        font-size: 1.5em; /* Large Text */
      }

      .note {
        font-size: 0.9em;
        color: #666;
        margin-top: 10px;
      }

      .gradient-text-fail {
        font-size: 2em;
        background: linear-gradient(
          45deg,
          #f3ec78,
          #fbb402
        ); /* Low contrast gradient */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; /* Makes the text color the gradient */
      }

      .gradient-text-pass {
        font-size: 2em;
        background: linear-gradient(
          45deg,
          #ff7700,
          #f44336
        ); /* High contrast gradient */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; /* Makes the text color the gradient */
      }

      .readable-text {
        background-image: url('https://via.placeholder.com/600x400/000000/FFFFFF/?text='); /* Dark background image */
        background-size: cover;
        background-position: center;
        color: #ffffff;
        font-size: 40px;
        padding: 40px 20px;
        text-align: center;
      }

      .hard-to-read-text {
        background-image: url('https://via.placeholder.com/600x400/FFFFFF/000000/?text='); /* Light background image */
        background-size: cover;
        background-position: center;
        color: #cccccc;
        font-size: 14px;
        padding: 40px 20px;
        text-align: center;
      }

      .gradient-pass-bg {
        background: linear-gradient(
          45deg,
          #283593,
          #1976d2
        ); /* Dark Blue to Blue gradient */
        color: #ffffff;
        padding: 40px 20px;
        font-size: 20px;
        text-align: center;
      }

      .gradient-fail-bg {
        background: linear-gradient(
          45deg,
          #ffeb3b,
          #f3f3f3
        ); /* Bright Yellow to Light Gray gradient */
        color: #ffeb3b;
        padding: 40px 20px;
        font-size: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>WCAG AA Color Contrast Compliance Examples</h1>
    <p>
      This webpage demonstrates WCAG AA compliance with various color contrast
      scenarios, including background images and gradients, for normal and large
      text.
    </p>

    <h2>Normal Text Examples</h2>
    <div class="container">
      <!-- Fail WCAG AA for Normal Text -->
      <div class="example fail-aa-normal">
        <strong>Fail AA:</strong> Low contrast between text and background.
        <p class="note">(Background: #cccccc, Text: #f3f3f3)</p>
      </div>

      <!-- Pass WCAG AA for Normal Text -->
      <div class="example pass-aa-normal">
        <strong>Pass AA:</strong> Sufficient contrast for normal text.
        <p class="note">(Background: #ffffff, Text: #000000)</p>
      </div>
    </div>

    <h2>Large Text Examples</h2>
    <div class="container">
      <!-- Fail WCAG AA for Large Text -->
      <div class="example fail-aa-large">
        <strong>Fail AA (Large Text):</strong> Low contrast for large text.
        <p class="note">(Background: #ffea00, Text: #ffeb3b)</p>
      </div>

      <!-- Pass WCAG AA for Large Text -->
      <div class="example pass-aa-large">
        <strong>Pass AA (Large Text):</strong> Sufficient contrast for large
        text.
        <p class="note">(Background: #282828, Text: #ffea00)</p>
      </div>
    </div>

    <h2>Background Image and Gradient Examples</h2>
    <div class="container">
      <div class="example gradient-fail">
        <p class="gradient-text-fail">Hard to Read Gradient Text</p>
      </div>

      <div class="readable-text example">
        Readable Text on Dark Background Image
      </div>

      <div class="hard-to-read-text example">
        Hard to Read Text on Light Background Image
      </div>

      <div class="gradient-fail-bg example">
        Hard to Read Text on Gradient Background
      </div>
    </div>
  </body>
</html>