However, the evolution of interfaces, variable typography, dark modes, and the need for truly perceptual accessibility have revealed an important limitation:
meeting WCAG 2 does not always mean text is genuinely readable.

This is where APCA (Accessible Perceptual Contrast Algorithm) comes in, the new approach shaping the future of visual accessibility and forming part of the transition toward WCAG 3.

The problem with contrast in WCAG 2

The current WCAG 2 model:

• Uses a fixed mathematical ratio between colors.
• Does not account for font size or font weight.
• Treats light-on-dark the same as dark-on-light.
• Can approve combinations that are difficult to read in practice.

This creates a common scenario in many digital products:

Interfaces that are “accessible on paper,” but not necessarily comfortable for real people.

What changes with APCA

APCA introduces a fundamental shift:
moving from a mathematical measurement to a perceptual measurement.

Instead of ratios like 4.5:1, APCA uses a scale called Lc (Lightness Contrast) that:

• Is based on how the human eye actually perceives contrast.
• Considers font size, font weight, and polarity.
• Enables different rules depending on the text type.
• Aligns with the future direction of WCAG 3.

The result is simple but powerful:

APCA measures real readability, not just technical compliance.

Why this is critical for Design Systems

For teams building Design Systems, the impact is immediate:

1. It redefines color tokens

It is no longer enough to “pass 4.5:1.”
Colors must now ensure comfortable reading within real typographic contexts.

2. It improves real product accessibility

Adopting APCA means:

• Less hard-to-read text.
• Better experiences in dark mode.
• More inclusive interfaces for users with low vision.

3. It prepares organizations for WCAG 3

APCA is not a passing trend.
It is the foundation of the next accessibility model coming with WCAG 3.

Adopting it early reduces:

• Technical debt
• UI rework
• Future compliance risk

WCAG 2 vs APCA in one sentence

WCAG 2 measures contrast.
APCA measures readability.

And in user experience, that difference changes everything.

Conclusion

Digital accessibility is entering a new era. We are moving from static rule-checking toward designing experiences that can truly be read.

Adopting APCA today does not mean abandoning WCAG 2 immediately, it means:

• understanding its limitations
• improving the visual quality of products
• preparing for the standard that is coming

Because in accessibility, the real goal was never to pass a test.

The real goal has always been that people can read.

The post APCA vs WCAG: why the future of visual accessibility has already changed appeared first on Roger Romero's Blog.

There are several typographic scales used in web and mobile design, and here are some of the most common ones:

The Importance of Typographic Scale on the Web

On the web, typographic scale is essential for guiding the user through content in a clear and coherent manner. Since the web is a visual communication medium, typographic scale helps create a visual hierarchy that makes reading and navigation easier.

The Ideal Typographic Scale for the Web

The most commonly used typographic scale on the web is the Major Third (1.250), as it provides a good balance between readability and visual hierarchy. This scale is based on the 5:4 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale on the Web

To apply typographic scale on the web, it’s important to consider visual hierarchy and readability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Third is popular on the web because:

• It provides a good balance between readability and visual hierarchy: The Major Third allows for creating a clear and consistent visual hierarchy, making reading and navigation easier on the web.
• It is flexible and adaptable: The Major Third can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with web design guidelines: The Major Third aligns with the web design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Third would look on the web:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve on the web.

The Importance of Typographic Scale in Mobile Applications

In mobile applications, typographic scale is crucial for creating an intuitive and appealing user experience. Since mobile screens are smaller than web screens, the typographic scale must be carefully chosen to ensure readability and usability.

The Ideal Typographic Scale for Mobile Applications

The most commonly used typographic scale in mobile applications is the Major Second (1.125), as it provides a good balance between readability and visual hierarchy on small screens. This scale is based on the 9:8 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale in Mobile Applications

To apply typographic scale in mobile applications, it’s important to consider readability and usability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Second is popular in mobile applications because:

• It provides a good balance between readability and visual hierarchy on small screens: The Major Second allows for creating a clear and consistent visual hierarchy on small screens, making reading and navigation easier in mobile applications.
• It is flexible and adaptable: The Major Second can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with mobile design guidelines: The Major Second aligns with the mobile design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Second would look in mobile applications:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve in the mobile application.

The Line Height in the Typographic Scale

Implementing a good line-height (or leading) for typographic scales involves balancing readability, visual hierarchy, and the overall aesthetic of your design. Here are some best practices to consider when setting line-height for different typographic scales:

General guidelines for Line Height

• Body Text: The line-height for body text should typically be between 1.4 and 1.6 times the font size. This range provides enough space between lines for readability, especially for longer passages of text.
• Headings: Headings generally require less line-height compared to body text, typically around 1.2 to 1.4 times the font size. This tighter spacing helps to visually group the heading with its related content.

Line Height adjusted to screen size

• Mobile: On smaller screens, reduce the line height slightly (e.g., 1.2 – 1.4 for body text) to accommodate limited vertical space while ensuring legibility.
• Desktop: You can afford to use slightly higher line heights on larger screens (e.g., 1.4 – 1.6 for body text) to create a more open and airy feel.

The Line Height context matters

• Dense Content: For text-heavy designs, like articles or reports, opt for a larger line-height within the recommended range to avoid visual clutter.
• Minimalist Designs: In minimalist or highly visual designs, you might opt for a tighter line-height to maintain a clean and compact appearance.

Accessibility considerations for the Line Height

Ensure that your line-height choices do not compromise accessibility. Text should be easy to read, especially for users with visual impairments. WCAG guidelines recommend a line-height of at least 1.5 times the font size for body text.

Test and iterate the Line Height

Always test your typographic settings across different devices and screen sizes. What works well on a desktop might need adjustment on a mobile device or a different browser.

Conclusion

Choosing the right typographic scale is crucial for creating a consistent and appealing user experience on the web and mobile applications. By understanding the most commonly used typographic scales in each medium, you can create design systems that guide the user through the content in a clear and coherent manner.

The post Typographic Scales in Design Systems appeared first on Roger Romero's Blog.