Components

Typography accessibility tests

USWDS typography should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Typography accessibility status

The USWDS team did 3 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
3	1	0	2	0

Overview of recent accessibility test results:

• Passed: 1
• Passed with exceptions: 0
• Conditional: 2
• Failed: 0

Test the typography in your project

USWDS tests components in isolation. You need to test the typography component in the context of your own site to ensure compliance with Section 508 accessibility standards.

Use the checklist below.

Follow the "how to test" instructions for each type of assistive technology.

Anyone can test for accessibility.

These quick manual tests don't require special equipment.

Typography accessibility checklist

• General tests
• Zoom magnification tests

General tests

Select passing tests

Text meets color contrast requirements. When you view text on a page and use ANDI or a color contrast analyzer to look at the hex colors, the font color meets WCAG color contrast of at least 4.5:1. Large text has a color contrast ratio of at least 3:1.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG AA
• 1.4.3 Contrast (Minimum)
• USWDS test status: Conditional
• Last test: v3.6.1

• USWDS test status:
  Conditional
• Last test: v3.6.1

Headings are present, appropriate, and follow logical order. When you view text on a page, headings summarize the content under them and have unique styles. h1-h6 levels are nested in a logical order (e.g., levels don’t get skipped).

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Conditional
• Last test: v3.6.1

• USWDS test status:
  Conditional
• Last test: v3.6.1

Zoom magnification tests

USWDS performed these tests to check typography accessibility and usability for zoom magnification. For help performing your own zoom magnification tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the typography component is used.
2. Enlarge the view of your screen to 200%.
3. Once zoomed, use a mouse to complete the tests in the checklist.

---

Use one of the following methods to control screen magnification in your browser:

1. Windows OS: Click ctrl while using the scroll wheel on your mouse until you see "200%" appear in the top right of your screen. Or, click ctrl + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click ctrl + 0.)
2. Mac OS: Click command + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click command + 0.)
3. Browser settings: Customize your browser settings to display pages at 200%.

Select passing tests

Text can be resized without loss of information. When you zoom to 200%, the text format stays consistent, and words don’t get obscured.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.6.1

• USWDS test status:
  Passed
• Last test: v3.6.1

Share your feedback

• Propose a new test
• Report an error

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-03-20	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2540