Designers

The contrast between the background and foreground needs to be high enough so the content can be read by people with low vision and color blindness. This includes text on images, page copy, buttons, and other design elements. This does not apply to decorative text that conveys no information to the user. Use colors from the official ACF color palette for design elements to ensure proper contrast. Choosing a light and dark color from the palette will oftentimes ensure a compliant contrast.

WCAG 2.0 , requires a minimum color contrast ratio of 4.5:1. To test your design’s color contrast, you can choose from several tools:

• WebAIM Color Contrast Checker – an online tool that allows you to enter a color’s RGB hexadecimal number or choose a color using the color picker
• Paciello Group Contrast Analyzer – an application that allows you to choose the background and foreground colors using an eyedropper tool

Example: Button 1 fails because the ratio is too low. Button 2 passes.

While color is a great way to highlight content, it should not be used as the only way to convey meaning. If you use color to differentiate content, provide an alternative way that does not rely on color, for example, an asterisk or label.

Example: Color only - This form fails accessibility requirements because it uses color alone to convey which fields are required. A color blind user may not be see the color difference and he/she would not know which fields were required.

Example: Color and symbol - This form passes accessibility requirements because although it uses color to convey meaning, it also includes the asterisk as alternative identification.

Example: The ‘color only’ multiple choice question fails accessibility requirements. The ‘color and number’ multiple choice question passes accessibility requirements.

When designing navigation, it is important to provide clear and consistent navigation naming, positioning, and styling on each webpage. Ensuring that repeated components occur in the same order and placement helps users more easily predict where to find things on a page. This helps users with cognitive limitations, low vision or blind, and people with intellectual disabilities.

Orientation clues like clear headings, breadcrumbs, and site maps help users understand where they are on a website or a page.

All form elements should include descriptive, clearly associated labels. Label and input fields are associated by proximity, so don’t create too much whitespace between the labels and fields. The goal is to make sure that enough information or instruction is provided so users know how to accomplish the task without confusion.

Form feedback is also an important design consideration. If someone makes an error when completing a form, error messages must be clear, specific, and identifiable. Providing information about input errors in text allows users who are blind or colorblind to realize that an error occurred.

For more help on designing and developing accessible forms: W3C’s Forms Tutorial , 18F's suggestions , UX Matters - Designing UX: Forms .

With more Americans using mobile devices to access the internet, how your design looks on various devices, screen sizes, and zoomed browser windows is important. A mobile device’s small screen size places practical limits on how much information a user can view at one time, especially when content is magnified by people with low vision. The position and presentation of page elements, like the header, navigation, or forms, should be changed to make best use of the space.

The display in a narrow window usually hides navigation elements (revealed via an icon) and presents content in a single, scrollable column. Minimize page content and place important information first so it is visible without scrolling. This helps users with low vision and users with cognitive impairments.

Use consistent layout of repeated, navigational, and interactive elements like links, buttons, and iconography. These interactive elements should have a reasonable default size (45-57 pixels wide) to minimize the need to zoom in and out for users with low vision.

Learn more about Mobile Accessibility , and recommendations on Mobile UI Design and Finger-Friendly Design .