Contrast Test Swatches
This page contains a series of gradient swatches for testing contrast.
- WCAG 1.4.3 Contrast (Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against adjacent colors
- WCAG 1.4.6 Contrast (Enhanced) requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text against adjacent colors
- WCAG 1.4.11 Non-text Contrast requires a contrast ratio of at least 3:1 against adjacent colors for visually important boundaries of controls and graphical objects
Pressing the "Toggle contrast boundaries" button will overlay lines and labels indicating where the WCAG minimum contrast ratios are met within each gradient swatch. Also shown are contrast ratios at the 10px and 490px marks of the 500px-wide swatches, to help conceptualize the contrast range across the gradient.
The boundaries were determined using a desktop color picker. Desktop color pickers return the sRGB values of the pixel under the cursor and are faithful to the color as the OS is currently rendering it to the screen, taking into account ICC profiles and OS-level filters — but not accounting for the final light output of the monitor due to its physical settings.
Test 1: Gradient from white to black, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 2: Gradient from teal to dark slate, with white text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 3: Gradient from yellow to blue, with dark gray text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 4: Gradient from light orange to salmon pink, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 5: Gradient from light gray to mid gray, with dark gray text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 6: Gradient from purple to thistle, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 7: Gradient from blue to sky blue, with white text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 8: Gradient from red to light salmon, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 9: Gradient from lime green to white, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 10: Gradient from dark navy to amethyst, with very light gray text
Test 11: Gradient from dark orange to light orange, with white text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text
Test 12: Gradient from dark orange to light orange, with black text
Some 28pt / 24px "large" text in a swatch
Some 18pt / 19px bold "large" text in this swatch
Some regular body text, which is 16px, the default size, in a swatch
Some text that is 13px or close to 10pt, what is typically consider "small" text