Color Contrast
The Web Color Contrast Rule
Normal text must have a contrast ratio of at least 4.5:1.
For larger text - 18 point or 14 point bold - text must have a contrast ratio of at least 3:1.
What Does It Mean?
Contrast is a measure of brightness. When the color contrast is a ratio of 4.5:1, it means one color is 4.5 times brighter than the other color.
Who Does It Help?
Everyone. It’s most helpful for persons with blindness, color blindness, low vision, or older persons.
Contrast Examples
Gray text on a black background: Pass - contrast ratio, 5.31:1.
White text on a black background: Pass – this is the highest contrast ratio, 21:1. White text is 21 times brighter than the black background.
Blue text on a blue background: Fail - contrast ratio of 1:1. Both have the same brightness.
UofL Primary Brand Colors
Cardinal Red text on white background: Pass
White text on Cardinal red background: Pass
Cardinal Red text on black background: Fail
Black text on Cardinal Red background: Fail
White text on black background: Pass
Black text on white background: Pass
For additional brand color combinations, visit: UofL's Brand Colors
How to Determine Color
A human can look at a color and know it’s red. But how does a computer know? Computers use hex values to represent colors.
Hex Code Examples
#000000 – Black
#FFFFFF – White
#AD0000 – Cardinal Red
Link to Color Chart: Wikipedia's basic colors chart
Color Testing Tools
Color contrast checker: WebAIM's Color Contrast Checker Tool
Color sampling tool: Chrome Smart Color Picker
Adobe Photoshop: Use eyedropper tool to capture colors from a snapshot of website.
Color Filters
Simulate color blindness on your computer.
Windows color filters: Settings -> Accessibility -> Color Filters
To navigate as a user with Red-Green color blindness, select Red-Green. Turn filters off to return to the default color spectrum.
FAQ
- Switching colors from the foreground to the background doesn’t change the contrast ratio between the colors. Black on white has the same contrast ratio as white on black, 21:1.
- For information on how WCAG picked the minimum color contrast requirements, exceptions to the rule and other details, visit the WCAG’s understanding contrast page:
W3C: Understanding Minimum Contrast
- Additional information on UofL’s Brand colors: https://louisville.edu/brand/visual/color