ADA Compliance Colors and Titles

Only once per page for h1 titles

Orange type #e76e3c h2 (28px) 300 weight

Then some content about whatever. This paragraph font size is at 12px with 300 weight. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum pellentesque molestie.

Close to above #d43900 h3 (20px) 300 weight

When the font size goes down, so does the contrast ratio. e76e3c worked for the h2 (28px) size, but not for the h3 (20px) size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum pellentesque molestie.

Green type #008000 h2 (28px) 300 weight

Then some content about whatever. This paragraph font size is at 12px with 300 weight. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum pellentesque molestie.

Close to above #008040 h3 (20px) 300 weight

When the font size goes down, so does the contrast ratio. 008000 worked for the h2 (28px) size, but not for the h3 (20px) size.
The paragraph color is the same as h3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum pellentesque molestie.

Structure

In the body of this page are two columns, both with a structure descending from h2 to h3. There are no errors in the report. The reason being is that even though the reader sees on the full body of the page:

h2
p
h3
p
h2
p
h3
p

It is a logical structure, the same as when one creates an academic “list.”

One does not need to worry about sidebar headings interfering with the correct hierarchy of the body titles.

Color Resources

The colors used in the first 2 columns were generated from http://colorsafe.co/. The colors I have selected (corresponding to its text size) are considered safe for a grade of “AA”. If the grade “AAA” is required, then these colors will not work. Within the colorsafe.co tool, one can select the “AAA” grade and get a more limited palette.

Checkers

Top accessible fonts

Many standard and widely available fonts score highly for web accessibility. The most accessible fonts are Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

Slab serif fonts including Arvo, Museo Slab, and Rockwell are also considered to be accessible. These font types are mostly used in headings rather than the body text.

You may have heard that sans serif fonts are more accessible for screen reading. However, as the research is not conclusive either way as to whether serif or sans serif typefaces are more readable, the decision is up to you. For the best outcome, it’s recommended to pick common fonts or font families that have strong and unique characters.