Web Guidelines
Accessible Colors
Accessible Combinations
Below is a list of color combinations that conform to WCAG 2.0 color contrast guidelines. These combinations either pass AAA, AA, or AA large WCAG levels. AAA and AA are acceptable to use for any type size. AA large combinations are safe to use for large text. Any combination listed below may also be used for user interface components.
Large text is defined as 18.66px (1.866rem) and bold or larger, or 24px (2.4rem) or larger.
AA Large
- Foreground: #004987
- Background: #FFFFFF
AA Large
- Foreground: #A6192E
- Background: #FFFFFF
AA Large
- Foreground: #A6192E
- Background: #FFFFFF
AA
- Foreground: #63666A
- Background: #FFFFFF
AAA
- Foreground: #041E42
- Background: #FFFFFF
AAA
- Foreground: #101820
- Background: #FFFFFF
AA Large
- Foreground: #A6192E
- Background: #71C5E8
AA
- Foreground: #004987
- Background: #71C5E8
AAA
- Foreground: #041E42
- Background: #71C5E8
AAA
- Foreground: #101820
- Background: #71C5E8
AA Large
- Foreground: #AA182C
- Background: #A3D19F
AA
- Foreground: #004987
- Background: #A3D19F
AA Large
- Foreground: #636569
- Background: #A3D19F
AAA
- Foreground: #041E42
- Background: #A3D19F
AAA
- Foreground: #101820
- Background: #A3D19F
AA Large
- Foreground: #636569
- Background: #A3D19F
AA
- Foreground: #041E42
- Background: #47A23F
AA
- Foreground: #101820
- Background: #47A23F
AAA
- Foreground: #FFFFFF
- Background: #245120
AA
- Foreground: #6BC4E8
- Background: #47A23F
AA
- Foreground: #FFB600
- Background: #245120
AA Large
- Foreground: #FF6B00
- Background: #245120
AA
- Foreground: #AA182C
- Background: #FFDB80
AA
- Foreground: #004987
- Background: #FFDB80
AA Large
- Foreground: #636569
- Background: #FFDB80
AAA
- Foreground: #011E41
- Background: #FFDB80
AAA
- Foreground: #101820
- Background: #FFDB80
AA Large
- Foreground: #AA182C
- Background: #FFB600
AA
- Foreground: #004987
- Background: #FFB600
AA Large
- Foreground: #636569
- Background: #FFB600
AAA
- Foreground: #011E41
- Background: #FFB600
AAA
- Foreground: #101820
- Background: #FFB600
AA
- Foreground: #FFFFFF
- Background: #805B00
AA Large
- Foreground: #6BC4E8
- Background: #805B00
AA Large
- Foreground: #FFB600
- Background: #805B00
AA Large
- Foreground: #AA182C
- Background: #FFB480
AA
- Foreground: #004987
- Background: ##FFB480
AA Large
- Foreground: #636569
- Background: #FFB480
AAA
- Foreground: #011E41
- Background: #FFB480
AAA
- Foreground: #101820
- Background: ##FFB480
AA Large
- Foreground: #004987
- Background: #FF6900
AA
- Foreground: #011E41
- Background: #FF6900
AA
- Foreground: #101820
- Background: #FF6900
AAA
- Foreground: #FFFFFF
- Background: ###803500
AA Large
- Foreground: #6BC4E8
- Background: #803500
AA
- Foreground: #FFB600
- Background: #803500
AA Large
- Foreground: #004987
- Background: #D38C97
AA
- Foreground: #011E41
- Background: #D38C97
AA
- Foreground: #101820
- Background: #D38C97
AAA
- Foreground: #FFFFFF
- Background: #A6192E
AA Large
- Foreground: #6BC4E8
- Background: #A6192E
AA Large
- Foreground: #FFB600
- Background: #A6192E
AAA
- Foreground: #FFFFFF
- Background: #530D17
AAA
- Foreground: #6BC4E8
- Background: #530D17
AA
- Foreground: #45A041
- Background: #530D17
AAA
- Foreground: #FFB600
- Background: #530D17
AA
- Foreground: #FF6B00
- Background: #530D17
AA Large
- Foreground: #004987
- Background: #80A4C3
AA
- Foreground: #011E41
- Background: #80A4C3
AA
- Foreground: #101820
- Background: #80A4C3
AAA
- Foreground: #FFFFFF
- Background: #004987
AA
- Foreground: #6BC4E8
- Background: #004987
AA
- Foreground: #FFB600
- Background: #004987
AA Large
- Foreground: #FF6B00
- Background: #004987
AAA
- Foreground: #FFFFFF
- Background: #002544
AAA
- Foreground: #6BC4E8
- Background: #002544
AA
- Foreground: #45A041
- Background: #002544
AAA
- Foreground: #FFB600
- Background: #002544
AA
- Foreground: #FF6B00
- Background: #002544
AA Large
- Foreground: #AA182C
- Background: #B1B3B5
AA Large
- Foreground: #004987
- Background: #B1B3B5
AAA
- Foreground: #011E41
- Background: #B1B3B5
AAA
- Foreground: #101820
- Background: #B1B3B5
AAA
- Foreground: #FFFFFF
- Background: #63666A
AAA
- Foreground: #FF6B00
- Background: #63666A
AAA
- Foreground: #FFFFFF
- Background: #323335
AA
- Foreground: #6BC4E8
- Background: #323335
AA Large
- Foreground: #45A041
- Background: #323335
AAA
- Foreground: #FFB600
- Background: #323335
AA Large
- Foreground: #FFB600
- Background: #323335
AAA
- Foreground: #FFFFFF
- Background: #041E42
AAA
- Foreground: #6BC4E8
- Background: #041E42
AA
- Foreground: #45A041
- Background: #041E42
AAA
- Foreground: #FFB600
- Background: #041E42
AA
- Foreground: #FF6B00
- Background: #041E42
AAA
- Foreground: #FFFFFF
- Background: #101820
AAA
- Foreground: #6BC4E8
- Background: #101820
AA
- Foreground: #45A041
- Background: #101820
AAA
- Foreground: #FFB600
- Background: #101820
AA
- Foreground: #FF6B00
- Background: #101820
AA Large
- Foreground: #636569
- Background: #101820