Web Guidelines

Guidelines
Elements
HTML/CSS

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