Accessible color palette builder
This is a tool to help build color palettes that conform with WCAG 2.0 standards. For more information, refer to Success Criterion 1.4.3.
Color palette
white
#FFFFFF
light
#B3EFFF
bright
#00CFFF
medium
#046B99
dark
#1C304A
black
#000000
Text size: normal
Accessible color combinations
White text Aa#FFFFFF | Light text Aa#B3EFFF | Bright text Aa#00CFFF | Medium text Aa#046B99 | Dark text Aa#1C304A | Black text Aa#000000 | |
Black background #000000 | Aa White text on Black background is 508-compliant, with a contrast ratio of 21:1. | Aa Light text on Black background is 508-compliant, with a contrast ratio of 16:1. | Aa Bright text on Black background is 508-compliant, with a contrast ratio of 11:1. | Do not use medium text on black background; it is not 508-compliant, with a contrast ratio of 3.5:1. | Do not use dark text on black background; it is not 508-compliant, with a contrast ratio of 1.5:1. | Do not use black text on black background; it is not 508-compliant, with a contrast ratio of 1.0:1. |
Dark background #1C304A | Aa White text on Dark background is 508-compliant, with a contrast ratio of 13:1. | Aa Light text on Dark background is 508-compliant, with a contrast ratio of 10:1. | Aa Bright text on Dark background is 508-compliant, with a contrast ratio of 7:1. | Do not use medium text on dark background; it is not 508-compliant, with a contrast ratio of 2.2:1. | Do not use dark text on dark background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use black text on dark background; it is not 508-compliant, with a contrast ratio of 1.5:1. |
Medium background #046B99 | Aa White text on Medium background is 508-compliant, with a contrast ratio of 5:1. | Aa Light text on Medium background is 508-compliant, with a contrast ratio of 4.68:1. | Do not use bright text on medium background; it is not 508-compliant, with a contrast ratio of 3.1:1. | Do not use medium text on medium background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use dark text on medium background; it is not 508-compliant, with a contrast ratio of 2.2:1. | Do not use black text on medium background; it is not 508-compliant, with a contrast ratio of 3.5:1. |
Bright background #00CFFF | Do not use white text on bright background; it is not 508-compliant, with a contrast ratio of 1.8:1. | Do not use light text on bright background; it is not 508-compliant, with a contrast ratio of 1.4:1. | Do not use bright text on bright background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use medium text on bright background; it is not 508-compliant, with a contrast ratio of 3.1:1. | Aa Dark text on Bright background is 508-compliant, with a contrast ratio of 7:1. | Aa Black text on Bright background is 508-compliant, with a contrast ratio of 11:1. |
Light background #B3EFFF | Do not use white text on light background; it is not 508-compliant, with a contrast ratio of 1.2:1. | Do not use light text on light background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use bright text on light background; it is not 508-compliant, with a contrast ratio of 1.4:1. | Aa Medium text on Light background is 508-compliant, with a contrast ratio of 4.68:1. | Aa Dark text on Light background is 508-compliant, with a contrast ratio of 10:1. | Aa Black text on Light background is 508-compliant, with a contrast ratio of 16:1. |
White background #FFFFFF | Do not use white text on white background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use light text on white background; it is not 508-compliant, with a contrast ratio of 1.2:1. | Do not use bright text on white background; it is not 508-compliant, with a contrast ratio of 1.8:1. | Aa Medium text on White background is 508-compliant, with a contrast ratio of 5:1. | Aa Dark text on White background is 508-compliant, with a contrast ratio of 13:1. | Aa Black text on White background is 508-compliant, with a contrast ratio of 21:1. |