-
[music]
-
Color contrast is an important factor to consider
when developing content. While the WCAG 2.0
-
guidelines may sound complicated, WebAIM offers
a free color contrast checker to ensure color
-
accessibility.
-
To access Webaim’s color contrast checker
go to WebAIM.org/resources/contrastchecker
-
There are a number of options for selecting
foreground or text color
-
Option 1 - Click inside the text box to select
a color from the available color pallet
-
Option 2 – Select the lighten or darken
links to adjust WebAIM’s default colors
-
Option 3 - Enter the color’s RGB code in
hexadecimal format into the available text
-
box. For example, the hexadecimal code for
black text is a pound sign followed by 6 zeroes
-
(#000000) and the code for an off-white background
is pound sign E3E3E3.
-
Repeat this process to select the background
color.
-
Once the foreground and background colors
have been entered, the checker will display
-
the contrast ratio of the colors selected.
-
In addition, the checker will also display
a Pass or Fail indicator for normal and large
-
text based on the ratios specified in the
WCAG 2.0 guidelines.
-
There is a Firefox add-on available called
Colorzilla, which can be used to determine
-
the hexadecimal code of any web-based element.
For more information about Colorzilla go to
-
www.colorzilla.com/firefox
-
WebAIM’s free color contrast checker provides
an easy way to verify the selected colors
-
meet WCAG 2.0 guidelines.
