14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Navigating CSS accessibility: From font size to contrast standards

November 9th, 2023

4 min read

CSS accessibility navigation, represented by measurement and sizing symbols

Written by

Joe Robinson


World of WYSIWYG

Considering the size and scope of accessibility guidelines, it helps to know and understand how to apply HTML, JavaScript, and CSS to ensure you incorporate accessible design into your websites, apps, or other products. But getting to the point where you feel confident that your designs are accessible, can be a long road, unless you have the right guides, accessibility checkers, and resources.

That’s what you’ll find in the following sections – a starting place to find out what you need to know about CSS accessibility.  

This article explores the basics of CSS accessibility, and includes resources for further information on accessibility, how CSS supports it and ways it contributes toward achieving it. You’ll also find resources produced by TinyMCE that are designed to provide the support you need to reach CSS accessibility standards.

Understanding CSS accessibility

Understanding CSS accessibility means seeing CSS as an important part of the wider accessibility guidelines. Looking closely at the WCAG Guidelines, there are four principles of web accessibility that require your content and site design to be:

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust, in terms of compatibility, code and role integrity, and exact status messages.

CSS plays an important role in all four areas.When CSS accessibility meets all four, it provides the best possible experience for everyone regardless of any impairments in regards to visual, auditory, or cognitive processing.

✏️ NOTE: It's worth taking time to understand the value of ARIA roles, states and properties since these attributes are similar to CSS accessibility technologies.

Mastering contrast for clear visibility

To achieve clear visibility for those with vision impairments, your site must have sufficient contrast between the background and foreground (text, HTML elements). When you’re making CSS style choices, compare the color value of the foreground and background, and make use of online contrast calculators to assist with your comparison:

The exact contrast ratios to look for are 4.5:1 for text content, and 3:1 for interface elements. Ratios of this order ensures that your CSS design creates a perceivable and operable website. 

The importance of accessible font size

Accessible font size is where two of your CSS style properties (font size and font contrast), are used to create operable, perceivable, and understandable content. A common strategy to improve your CSS accessibility is to provide the option to increase font size so it's clear and readable on various devices.

Accessible font size helps everyone, and can positively impact someone’s life. There’s many considerations in selecting fonts that are readable and clear, which is why a resource on crafting an accessible font design can help – check through this Font Accessibility guide.

Creating accessible menus: CSS strategies

CSS strategies for creating accessible menus involve paying close attention to ARIA attributes, targeting them with CSS selectors to ensure the web content is perceivable and operable. CSS selectors can show whether a menu is shown or hidden with CSS pseudo element and pseudo classes. The ::after pseudo element styles menu content to make sure that the border styles have higher contrast across operating systems and browsers.

For example, check on the ARIA example of an accessible menu. The example provided demonstrates the CSS strategies available that could be applied to create an operable menu.

Utilizing CSS accessibility checkers

If you require a CSS checker, or a different kind of accessibility checking service, the Web Accessibility initiative maintains a list, which is kept updated each year. Checkers that include CSS accessibility in their scope, and specifically provide support for WCAG 2.0 and WCAG 2.1 Guidelines include (but are not limited to) the following CSS accessibility checkers:

  1. a11y.css’, A CSS file you can incorporate into your project that evaluates a sites accessibility
  2. The a11y, A color contrast Accessibility Validator, which can test for WCAG 2.1 color accessibility up to AA level 3
  3. Accessi, A URL scanning tool and website accessibility validator, which includes CSS
  4. accessibilitychecker.org, A comprehensive website checker that can provide reports on specific web pages
  5. Equally AI, An accessibility auditing tool
  6. Axe, An Accessibility Linter plugin for the Visual Studio Code text editor
  7. Aditus, a button contrast checker
  8. HTML Validator, which includes CSS validation checking
  9. MAUVE, the Multiguideline Accessibility and Usability Validation Environment
  10. Total Validator, for testing a single page or multiple pages depending on pricing level

💡NOTE: If you’re including TinyMCE as your project’s WYSIWYG, you can provide accessibility checking to your customers using TinyMCE’s Accessibility Checker (Premium) plugin

Navigating CSS accessibility, and other resources

CSS accessibility improves websites perceivability, operability, and understanding, and contributes to its robustness. It specifically contributes to focus, and the design of elements that can hold focus, thereby directly improving keyboard navigation. When it comes to fonts, you can make a viewer’s experience easier by knowing the essentials of CSS Accessibility and fonts by consulting useful resources.

For more on Accessibility, read the TinyMCE guide on accessibility and emoji, as well as the guide on how accessible product design helps everyone and learn from our infographic on How to write alt text for images.

Contact us today if you have any questions about how TinyMCE’s Accessibility Checker (Premium plugin) can support you.

byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • World of WYSIWYGMay 8th, 2024

    Math Equations and Enhanced AI connections - TinyMCE 7.1

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge


© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.