Contrast Example
Allow for sufficient contrast between colors on a page and ensure that information conveyed by the use of color is understandable without color.
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.Example
Good color contrast consists of dark colors on light backgrounds, or light colors on dark backgrounds. The Normal Vision column shows some general good color contrasts. The Red/Green Colorblind and Blue/Yellow Colorblind columns show what a person would see if they were colorblind.
| Red/Green
Colorblind |
Normal
Vision |
Blue/Yellow
Colorblind |
||
|---|---|---|---|---|
Good
Color Contrast |
Good
Color Contrast |
Good
Color Contrast |
||
Good
Color Contrast |
Good
Color Contrast |
Good
Color Contrast |
||
Good
Color Contrast |
Good
Color Contrast |
Good
Color Contrast |
||
Good
Color Contrast |
Good
Color Contrast |
Good
Color Contrast |
Technique to Avoid
Bad color contrast generally consists of dark colors on dark backgrounds, or light colors on light backgrounds. The Normal Vision column shows some general bad color contrasts. The Red/Green Colorblind and Blue/Yellow Colorblind columns show what a person would see if they were colorblind.
| Red/Green
Colorblind |
Normal
Vision |
Blue/Yellow
Colorblind |
||
|---|---|---|---|---|
Bad
Color Contrast |
Bad
Color Contrast |
Bad
Color Contrast |
||
Bad
Color Contrast |
Bad
Color Contrast |
Bad
Color Contrast |
||
Bad
Color Contrast |
Bad
Color Contrast |
Bad
Color Contrast |
||
Bad
Color Contrast |
Bad
Color Contrast |
Bad
Color Contrast |
Portions of this website are used with permission from Penn State University.