Accessible Color Combinations
Please do not use greyed-out color combinations; they do not meet a color contrast ratio of 4.5:1, so they do not conform with the WCAG 2.1 standards for body text. This means that some people would have difficulty reading the text. Employing accessibility best practices imrpoves the user experience for all users.
Navy Blue text
#000E2F Aa |
Blue text
#004369 Aa |
Teal Grey text
#79AFBA Aa |
Bright Teal text
#64C7C9 Aa |
Light Teal text
#98D7D8 Aa |
Yellow text
#FFDA30 Aa |
Orange text
#EE6921 Aa |
Red text
#BE2D2D Aa |
Dark Grey text
#7e868C Aa |
Light Grey text
#BDC0C3 Aa |
Black Text
#000000 Aa |
||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color | Navy Blue background
#000E2F |
Sample Text | Sample Text | Sample Text | Sample Text | Sample Text | Sample Text | Sample Text | ||||
Blue background
#004369 |
Sample Text | Sample Text | Sample Text | Sample Text | ||||||||
Teal Grey background
#79AFBA |
Sample Text | Sample Text | ||||||||||
Bright Teal background
#64C7C9 |
Sample Text | Sample Text | Sample Text | |||||||||
Light Teal background
#98D7D8 |
Sample Text | Sample Text | Sample Text | |||||||||
Yellow background
#FFDA30 |
Sample Text | Sample Text | Sample Text | |||||||||
Orange background
#EE6921 |
Sample Text | Sample Text | Sample Text | |||||||||
Red background
#BE2D2D |
||||||||||||
Dark Grey background
#7e868C |
Sample Text | Sample Text | ||||||||||
Light Grey background
#BDC0C3 |
Sample Text | Sample Text | Sample Text | |||||||||
White background
#FFFFFF |
Sample Text | Sample Text | Sample Text | |||||||||
Black background #000000 | Sample Text | Sample Text | Sample Text | Sample Text | Sample Text | Sample Text | Sample Text |