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.

In this article, we’ll explore when and how to use these three elements within a design system and share the best and worst practices for using icons in each of them.

Badge

What is a Badge and When to Use It?

A badge is a small visual element that typically appears on or near a component, such as an icon or product card, to display relevant information like a count or status. Its main function is to highlight concise information that requires immediate attention without disrupting the interface’s flow.

When to use it:

• Notification or count alerts: Use badges to show the number of pending items or actions, such as unread messages, items in a shopping cart, or available updates.
• Status indicators: To signal a relevant state or category, such as the priority of a support ticket or product availability (e.g., “In stock” or “Out of stock”).

Examples:

• A bell icon with a badge showing the number of new notifications.
• A red badge with a number on an inbox icon indicating unread messages.

Best Practices for Icons in Badges:

• Clear visuals: Use simple and recognizable icons that immediately convey the action or status. For example, an envelope for unread emails or an alert symbol for warnings.
• Proper sizing: Ensure the icon is large enough to be visible in the badge’s small space, but not too large to overwhelm it.
• Effective contrast: Make sure the icon contrasts well with the badge’s background so that the information is legible.

Worst Practices:

• Overloading the space: Avoid combining text, icons, and numbers all at once in a small badge. Keep the design simple and focused.
• Ambiguous icons: Don’t use icons that require interpretation or that aren’t universally understood. A confusing icon will frustrate the user and defeat the badge’s purpose.

Ribbon

What is a Ribbon and When to Use It?

A ribbon is a banner or strip that overlays content, such as an image or product card, to highlight a special feature or promotion. Its goal is to catch the user’s attention on something important, like an offer or a new product.

When to use it:

• Highlight promotions or special attributes: Use ribbons when a product or content needs to be emphasized with labels like “On Sale,” “New,” “Exclusive,” or “Limited.”
• For featured products: Emphasize the most popular products, temporary promotions, or new releases.

Examples:

• A ribbon that says “New” on the corner of a product card.
• A banner highlighting a discount offer over a product image in an online store.

Best Practices for Icons in Ribbons:

• Complement the text: Icons in ribbons should reinforce the message. For example, a star icon could accompany a ribbon that highlights a “Featured Product.”
• Simplicity: Since the ribbon already draws attention, the icon should be subtle and not steal focus from the primary content.
• Visual consistency: Ensure the icon’s style matches the rest of the design system to maintain visual coherence.

Worst Practices:

• Redundant icons: Don’t add icons that merely repeat what the text already conveys. If the ribbon says “New,” adding an icon might be unnecessary.
• Overloading with icons: Avoid using large or detailed icons that can make the ribbon look cluttered or unclear.

Notifications

What is a Notification and When to Use It?

A notification is a pop-up or persistent message in the interface that informs the user about important events or required actions. Notifications can be interactive (allowing the user to close or respond) or passive (informative, with no action required).

When to use it:

• To inform about important changes: Notifications are useful when you need to alert the user about system changes, such as a new update, message, or completed event.
• To request user actions: Use notifications when the system requires the user to take a specific action, like confirming a purchase, reviewing a message, or accepting a condition.

Examples:

• A banner at the top notifying the user of a successful update.
• A pop-up notification reminding the user of a pending task.

Best Practices for Icons in Notifications:

• Clear, informative icons: Use icons that help users quickly identify the type of notification. A checkmark icon can indicate success, an exclamation mark a warning, and an “X” an error.
• Visual hierarchy: Icons shouldn’t compete with the main content of the notification. Keep the icon size proportional and aligned with the content.
• Appropriate colors: Ensure the icon’s color matches the notification’s context. Green icons should indicate success, yellow should indicate warnings, and red should indicate errors or issues.

Worst Practices:

• Overloading with icons: Don’t add unnecessary or decorative icons to a notification that already contains sufficient informative text. This can overwhelm the user visually.
• Inconsistent icon colors: Avoid using incorrect icon colors that don’t align with the notification type. A red icon for a success message can confuse users.

Conclusion: When and How to Use These Elements

• Badges are ideal for displaying concise, direct information, such as counts or statuses. Use them when you need to highlight numbers or updates without interrupting the user experience.
• Ribbons are effective for drawing attention to featured products or characteristics. They are visually appealing and should be used sparingly to avoid cluttering the interface.
• Notifications should be used when the user needs to be informed or alerted about important events. Make sure they are clear and non-intrusive, respecting the user experience.

In all cases, the effective use of icons is crucial. Icons should complement rather than overload, and always be accessible and understandable. By following these practices, you can ensure that these components function effectively within a design system, providing an intuitive and pleasant user experience.

If you’re developing a UI design system, remember that balancing functionality and aesthetics is essential. Well-implemented badges, ribbons, and notifications, along with the appropriate use of icons, can make an interface not only visually appealing but also highly functional and accessible.

The post How to use badges, ribbons and notifications in user interface designs appeared first on Roger Romero's Blog.

Origins of the Three-Click Rule

The three-click rule was popularized by Jeffrey Zeldman in his book “Taking Your Talent to the Web“, published in 2001. Zeldman argued that users start to lose interest if they don’t find what they’re looking for after three clicks, which can lead to a higher abandonment rate. Although subsequent studies have suggested that tolerance for clicks may depend more on the perceived value during navigation than on the exact number of clicks, the rule remains a useful starting point for designers seeking to create intuitive and efficient interfaces.

Challenges with Interactive Components

Components such as accordions, carousels, and tabs can complicate adherence to the three-click rule as they often hide content behind additional interactions. This can lead to a more cumbersome and less intuitive user experience.

Accordions: While they reduce scrolling by compressing large amounts of content, they can also conceal essential information, forcing users to make more clicks to access it.

Carousels: Used to display multiple content items, they can be problematic if content automatically changes before the user has a chance to interact with it.

Tabs: Although they efficiently organize content, they can also require additional clicks to view information that might otherwise have been visible.

When and How to Use These Components

Accordions: Useful for FAQ sections or for complex forms where not all information needs to be visible immediately.

Carousels: Suitable for complementary and non-critical content, such as image galleries on product pages, provided that users have full control over the navigation.

Tabs: Great for dividing detailed information about products or services into distinct categories that do not require sequential consumption.

Conclusion

These examples highlight how accordions, carousels, and tabs, when strategically implemented, can significantly enhance the usability and efficiency of user interfaces. In each case, the design considers both the user’s needs and the specific objectives of the context, ensuring that content is accessible without visually overloading or unnecessarily complicating the user experience. The key is to use these components in a way that complements and enhances navigation, always respecting the three-click rule to keep the interface friendly and accessible.

The post Simplifying Web Navigation: The Three-Click Rule appeared first on Roger Romero's Blog.

Ease of Use

If a product is easy to use, it means the design, structure, and purpose of the product are clear and the product is easy to understand. When evaluating how easy a product is to use, you can ask yourself questions like: Are all parts of the design easy to find? Is the functionality of the design easy to grasp? Can users accomplish specific tasks within the design? During your evaluation, these questions can help determine if the design is easy to use.

Imagine you’re evaluating how easy to use an airline app is. If the primary goal of this app is to book a flight, the design should provide a clear, simple way to accomplish that task. For example, a section where the user can easily enter itinerary and flight details on the homepage would be an example of ease of use.

Equity

If a product exhibits equity, it means its design is usable for people with diverse abilities and backgrounds. In other words, the product design caters to the needs of a diverse audience and ensures a high-quality experience for all users, regardless of their origin, gender, race, or ability level. Equity is about providing people with the tools they need to achieve their goals and have a better quality of life. Equity goes beyond just equality —giving everyone the same resources— because often people need different tools and support based on their needs. This is especially important for those who belong to groups that are typically excluded. When evaluating the equity of a product’s UX, you might ask yourself questions like: Are the needs of a diverse group of users accounted for? Does the product design address the needs of traditionally underrepresented and excluded groups? These questions can help you determine if the design offers an equitable experience.

Imagine you’re evaluating how equitable a social messaging app is. You might consider that the design is more equitable if the emoji keyboard offers avatar options with different skin tones and gender-neutral choices.

Delight

If a product provides delight, it means the design delights the user. The design reflects what the user thinks or feels and creates a positive connection with them. A product’s design doesn’t have to be delightful in order to function properly. However, a delightful design complements an already functional product and can enhance the user’s feeling about the experience. When evaluating how delightful a product’s UX is, you might ask yourself questions like: Are there aspects of the design that account for the user’s feelings? Does the design delight the user? Does the design keep the user engaged throughout their experience? These questions can help determine if the design offers a delightful experience.

Imagine you’re evaluating how delightful a video streaming app is. Some design aspects that could make the product more delightful are personalized recommendations based on channels the user previously watched or the ability to customize the look of their account.

Usefulness

If a product is useful, it means it solves the user’s problems. In other words, the design intentionally solves a user problem that the designer has identified. It’s important to note that while related, the concepts of “useful” and “easy to use” have different meanings. A useful product isn’t always easy to use, and vice versa. The distinction is that “easy to use” refers to whether the product functions well and is straightforward to use, while “useful” specifically refers to the ability to solve user problems. When evaluating how useful a product’s UX is, you might ask yourself questions like: Does the design add value to the user’s experience? Does the design solve a problem for the user? Does the design help the user achieve a specific goal? These questions can help determine if the design offers a useful experience.

Imagine you have to evaluate how useful a banking app is. Users typically download these apps because they need a place to manage their money. With that in mind, some aspects of the app that could be considered useful are features that can be used to transfer money between accounts and pay bills.

The post Key features of a good User Experience (UX) appeared first on Roger Romero's Blog.