CAT Practice – Testing Contrast
Before starting Color Contrast testing confirm your system is setup correctly.
The following is dusty blue box with white text
Colour Contrast Analyser CCA output:
- Foreground: #FFFFFF
- Background: #1E90FF
- Contrast ratio: 3.2:1
- 1.4.3 Contrast (Minimum) (AA)
- Pass for large text only. Fail for regular text
- 1.4.11 Non-text Contrast (AA)
- Pass for UI components and graphical objects
You can also use your browser’s code inspection tool to review the colors of the text directly. Look for the computed background-color of: `The following is dusty blue box with white text`
If it’s anything other than rgb(30, 144, 255) then it’s not actually dusty blue, and you will need to adjust your system before preforming color contrast testing.
1.4.3 Contrast (Minimum)
1.4.11 Non-text Contrast, is everything else:
Button 1 is non-actionable
Just being used to show a common non-text element
Button 2 has two states
However it is not an overly smart button, after activating once it’s no longer actionable. To get back to the original button state, refresh the page.
Color expressing meaning
CCA color Picker might not get the exact colors, but these are what were using in XLS. Colors can be distorted when changed to images.
- Wiggets blue= #4472C4
- Wurrlies rust= #C55A11
- Snuggles green= #548235