What I’d say here is to use rems and ems for everything, even for other properties besides font-size (with the exception of borders, where I use pixels). There are several publications discussing the benefits of using ems and rems and it’s beyond the scope of this article. WCAG recommends using em units to define font size. Therefore, when defining fonts, we have to avoid hindering the ability of a user or a device to change our styles and let go of assumptions: we just don’t know where our content is going to land and we can’t be sure about the exact size, language, or font that’s used to display content.īut there is one thing that we can control: proportions.īy using CSS relative units, we can set our content to be proportional to whatever the environment tells it to be. In some situations, we may even explicitly allow switching between a limited set of fonts. For example, OpenDyslexic is a typeface created to increase readability for readers with dyslexia. The content might be translated, the custom font family might fail to load, or it might even be changed. We don’t fully control the font-family property, either. there is an empirical study run by the people behind the Internet Archive showing that there is a significant amount of users who change their default font size in the browser settings. The browser first loads its default styles (also known as the “User Agent stylesheet”), then those cascade to the author’s styles (the ones we define), and they both cascade and get overwritten by the user’s styles.Īs Adrian Sandu mentions in his article about rem CSS units: Here is the good news: a browser’s default styles are accessible and we can leverage them to build an accessible font size strategy. Notice how a larger font size lets in more of the background that sits behind the text. The WCAG recommended font size for large text has greater contrast than something half the size. In short, WCAG specifies contrast instead of size. Here’s the word “Hello” compared next to three other languages: For other fonts, like CJK (Chinese, Japanese, Korean) or Arabic languages, the actual size in pixel would be different. Since we live in a world with different screen densities, specs measure sizes in points, not pixels, and in some displays, 18pt is equal to 24px. That’s why specs cannot define a font size that meets the specification for contrast ratios.Īnd when we talk about “text” and “large text” sizes, we’re referring to what the spec calls “the minimum large print size used for those languages and the next larger standard large print size.” To meet AAA criteria using Roman text, for example, “large” is 18 points. Some characters are simple and readable in smaller sizes, others are incredibly complex and would lose vital details at the same size. There are around 300 alphabets in the world. Example of three color contrast measurements and their WCAG test results according to WebAIM’s contrast checker. Stacy Arrelano’s deep dive on color contrast provides an excellent explanation of how contrast ratios are calculated. You can use tools like WebAIM’s Contrast Checker to ensure your text meets the guidelines. Text has to follow a contrast ratio of at least 4.5:1, with the exception of a large-scale text that should have a contrast ratio of at least 3:1. This is why I said “it depends” on what makes an accessible font size. More like the ability to increase the size by 200% while maintaining readability and avoiding content collisions and overlaps. We want to provide users with low vision a way to choose how fonts are displayed. Sizing, contrast, and 300 alphabetsįirst, resizing text. We’ll get into some specific a bit later but, for now, let’s explore the WCAG requirements for fonts. So, how can we make sure our font sizes are accessible? What sort of best practices can we rely on to make for an accessible reading experience? The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web.īut we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |