Design

What is design??

WCAG2 Are You Still Using It?

WCAG2 Are You Still Using It? UI Contrast Visibility Standard (Readability Contrast)

The orange background with white text on the button often fails to meet WCAG2 standards. Can it still be used, or is it solely based on the designer’s intuition?

I believe ordinary people cannot effectively represent the perspectives of color-blind individuals. If choices are based solely on experience and do not meet WCAG standards, further exploration may be necessary.

Have you ever considered this? The widely used WCAG standard in UI design can sometimes result in a ‘Fail’ rating under certain circumstances, even when it doesn’t appear to be a significant issue to us.

This discrepancy arises from the inherent calculation methods used by WCAG. Below, I will explain these methods and discuss how the new APCA standard can address existing problems while continuing to excel in the future of UI design.

What is WCAG?

The WCAG (Web Content Accessibility Guidelines) is not just a guide for Color Contrast; it is a comprehensive resource for web accessibility. We acknowledge the importance of WCAG in addressing Color Contrast, as well as its contributions in other areas.

The WCAG 2.x version uses a binary system—Pass or Fail—to indicate whether the colors meet visibility contrast standards. However, the way the human eye perceives contrast is non-linear. This means that the guidelines do not account for the high dynamic range of human vision, which can be considered an unfair limitation.

High Dynamic Range

Let’s use photography as an example. Many people have experienced the challenge of taking photos against the sun. In bright sunlight, objects that appear pitch black to the camera may still be visible to our eyes. This is due to the remarkable ability of our eyes to adjust automatically to varying light conditions. The pupil controls the amount of light entering the eye, allowing us to see objects clearly even in backlit environments.

On the other hand, if a camera has a larger photosensitive component—such as Hasselblad’s medium format film sensor—it performs significantly better in these challenging lighting situations. When the frame size is limited in cameras like smartphones, manufacturers often utilize HDR (High Dynamic Range) photography. This technique combines multiple frames to emulate the way our eyes perceive light and detail.

Thanks to the advancements in Micro LED and OLED technology, the media we use to interact with digital content will increasingly lean towards HDR content. This evolution marks a significant shift in how we experience visual media.High Dynamic Range

Issue with WCAG 2: Formula

The problem has gradually emerged: WCAG calculates using the relative brightness value of colors, known as luminance. This refers to the brightness of a color itself.

  • R, G, and B represent the red, green, and blue components of the color, respectively.

Color Relative Luminance Calculator
This website can calculate luminance. Afterward, you can process the text with the background color ratio:

  • L1 is the luminance of the foreground color.
  • L2 is the luminance of the background color.

In simple terms, WCAG relies on the relative brightness of colors as a basis for its calculations, which does not account for the adaptive nature of the human eye.

Relative brightness remains constant, but the adaptability of the human eye is dynamic. How can this be correct?

Let me illustrate with a favorite example: Imagine a completely dark room with 100 lit candles. Does it become brighter? Yes. If you then add another 100 candles on top of the initial 100, does it get even brighter? Again, yes.

However, which transition feels brighter: going from 0 to 100 candles, or from 100 to 200? From a perceptual standpoint, the change from 0 to 100 should feel more noticeable. Interestingly, even though the brightness difference between 100 and 200 candles is the same as that between 0 and 100, the perceived intensity feels different. The explanation lies in the adaptability of the human eye.

Where WCAG 2.X Missed the Mark

The formula used in WCAG 2.X has some shortcomings. When both the text and background colors are light, the calculated contrast value tends to be low because of the high relative luminance of the colors. On the other hand, when colors with low relative luminance are used, applying the same formula often results in a high contrast value.

WCAG original author’s words

As of the 19th of June, 2019 edit: I will reiterate a bit because “accurately modeling lighting displays (luminous screens) under real-world environmental conditions” is not possible. WCAG fails miserably with mid-range colors because it cannot adapt to human non-linear perception. Therefore, it is not suitable for systematic viewing of digital product readability, especially in the mid and dark ranges.

APCA

Advantages of APCA

The Accessible Perceptual Contrast Algorithm (APCA) is a new model that calculates lightness contrast (Lc) results. We will not delve into the standard Lc values for icons and text since there is ample information available online. The most noticeable advantage of APCA is its ability to reference both positive and negative values at the same numerical level for light and dark backgrounds. This feature allows for the design of a color system that offers more consistent contrast.

Difference from WCAG 2.X: Formula

The shortcomings of WCAG 2.X arise from issues with its formula. APCA has significantly improved upon this with a new formula:

  • Lc(foreground) refers to the lightness of the foreground color.
  • Lc(background) refers to the lightness of the background color.

Lc is calculated based on the CIE Lab Color Space, which is a perceptually uniform color space that considers the human visual system’s response to different wavelengths of light.

ACTTR Technology — CIELAB Color Space and Coordinate Exchange

This tool can calculate the coordinates of a color in the CIELAB color space. To determine the Lc value, you can use the known RGB values in the formula to obtain f(L). The function f(L) maps RGB values to the CIE Lab space. The relevant formula is as follows:

*L represents the brightness of color (luminance), ranging from 0 to 1. Next, calculate Lc using f(L) as follows:

The Lc of colors is a number between 0 and 100. A higher Lc value means the color is lighter (brighter), common Lc values for colors can be referenced:

Common Lc Values Reference

Sharp-eyed readers may have noticed that the foundation of the APCA formula, f(L), is based on the calculation of the CIE Lab color space. This model is rooted in the wavelength response of the human eye to light. Therefore, the results of the APCA color standard can serve as a more user-friendly method for UI designers to assess color readability when creating digital content.

Conclusion

The WCAG 2.X standards have been in the industry for many years. However, the media devices prevalent at the time WCAG 2.X was developed (such as CRT screens) are vastly different from today’s LCDs and LEDs. While the contributions of WCAG 2.X standards to the design industry are undeniable, it may be time to upgrade to newer standards that better align with current needs.

So far, there seem to be few designers or teams in Taiwan discussing or utilizing the APCA standard. It’s possible that certain specific service targets necessitate adherence to the WCAG 2 standards for broad applicability. Given that the APCA standard is still in development and not widely adopted, there are many plugins in Figma that support contrast detection using APCA. Therefore, we might consider gradually incorporating APCA into our workflow moving forward.

Unlocking the power of a systematic approach to crafting stunning enterprise UI color palettes!

How can you create color palettes that effectively balance accessibility, brand identity, and scalability?

There’s almost always a starting color

Contrary to some advice, designers rarely create palettes from scratch. Most often, we build on established brand guidelines. 

Establishing light mode colors

Baseline color

Using the seed color directly is not always feasible because it may not meet accessibility requirements. Consider these popular brand colors that do not satisfy WCAG 2.1’s AA standards for regular text:

To ensure compliance with WCAG 2.1 guidelines, start by establishing a baseline color. Adjust the lightness of the seed color using a contrast tool until it meets the minimum requirements for regular text displayed against a white background. This baseline color will serve as the foundation for all other colors.

Canvas color

To identify this color, set the baseline color as the foreground and use white as the background in your contrast tool. Gradually increase the lightness of the foreground color until it reaches a 1.1:1 contrast ratio with the background — just enough to subtly suggest the color.

Default and subdued accent colors

Accent colors attract attention to actionable elements such as buttons and links. Two levels of contrast — default and subdued — help establish visual hierarchy.

  • Default accent: Reduce the baseline’s lightness until it has a 1.7:1 contrast ratio against the baseline color.
  • Subdued accent: Lower the alpha (opacity) of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio for text against the canvas color.

Default and subuded neutral colors

Neutral colors serve as the default for most content, much like text printed on paper.

  • Default neutral: Reduce the default accent’s lightness until it achieves a 1.3:1 contrast ratio against black.
  • Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.

Establishing dark mode colors

Baseline color

Dark mode typically requires lower saturation levels to reduce eye strain and enhance accessibility. Begin by decreasing the saturation of the light mode baseline by 33%. Next, adjust the lightness until it complies with WCAG 2.1’s minimum contrast standards for regular text displayed on a black background.

Canvas color

For simplicy, reuse the light mode’s default neutral color.

Default and subdued accent colors

In dark mode, invert the light mode formulas:

  • Default accent: Increase the dark mode baseline’s lightness until it achieves a 1.7:1 contrast ratio against the baseline color.
  • Subdued accent: Reduce the alpha of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio against the canvas color.

Default and subdued neutral colors

Again, invert the light mode formulas:

  • Default neutral: Increase the default accent’s lightness until it has a 1.3:1 contrast ratio against white.
  • Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.

APCA changes things

These colors were calculated using WCAG 2’s flawed contrast formula, which WCAG 3 aims to improve with the introduction of APCA. This new method will address the contrast formula flaws while also considering font size and weight to ensure sufficient readability. While I’m unsure how this will impact my approach, I’m eager to explore the changes when we cross that bridge.

The Design Brief

The design brief should be provided by the customer. This is the theoretical expectation. However, in many cases—especially when the project is not too large or when you have an established relationship with the customer—the brief may be very brief. It might even be a single sentence, such as, “Can you design an application for young art enthusiasts?”

In such instances, your task is to gather all the necessary information to begin the project. It is crucial not to delay and “wait for an answer.” If you already have a commitment from the customer (perhaps even an upfront payment), you should continue working on different areas to expedite progress. You might consider starting DesignOps or outsourcing initial research.

In corporate environments or job listings, this part of the work is often referred to as “requirements gathering” or “requirements refinement.”

What Should a Design Brief Contain?

Consider your design brief as a foundational document akin to a contract; this approach can simplify the process. Even in a large organization, starting a new engagement acts as a form of signing a contract. You are agreeing to deliver specific work under particular conditions, similar to a contractual job. Thus, the design brief should encompass all the information necessary to determine if the project can be completed within the given time frame.

  1. Overview
    This section should provide a clear explanation of the project and the sponsor’s vision. A few sentences in the customer’s own words can greatly assist in guiding your work.
  2. User Profile or User Group
    Include a detailed description of the target users for the design. The more specific the description, the better. Ideally, this should be based on solid market research. For enterprise application design, having a well-defined group of key users is essential. If the customer can specify names rather than just roles, it creates a more informed design process.
  3. Objectives
    It is beneficial if the customer outlines specific objectives and success indicators. These could be framed in terms of Key Performance Indicators (KPI) or Objectives and Key Results (OKR). For example, “I want the project to be in the top five downloaded apps on the App Store within a year,” or more generally, “I want the application to function smoothly and have an intuitive interface.” When defining objectives, feel empowered to challenge those you don’t impact as a designer, and be wary of vanity metrics (e.g., likes, views, etc.). Many clients favor these, but designers often have minimal influence over them. Remember that not all objectives are easy to measure; some rely on shared understanding, especially when aiming for emotional effects or artistic goals.
  4. Competition
    There is always competition. Even if a customer claims there are no similar products in the market, don’t argue—conduct your own research. In nearly all cases, you will find competitors, whether they are direct or indirect, or located in different regions. Understanding competitors can provide valuable insights, so ask yourself what they did well and why.
  5. Aesthetic Expectations
    This section should clarify the customer’s tastes and understanding of beauty. While user preferences are crucial, it’s important to consider who is funding the project—the users or the customer. Many exceptional designs fail to receive approval due to emotional reactions rather than logical assessment. To mitigate this, include aesthetic guidelines in the brief, clearly stating measurable requirements. If a customer wants the design to convey tranquility, for example, request examples to better understand their vision. This is especially critical for projects aimed at children.
  6. Branding, Tone of Voice, and Visual Styling
    While these might not heavily influence strictly UX projects, neglecting them can lead to significant challenges later on. For instance, if you design an entire application flow for a hotel mobile app only to discover that the brand’s visual language emphasizes airy, wide visuals while the app focuses on a flat, technical UI, you may face major inconsistencies. Brand colors can also greatly affect usability.
  7. Benchmarks
    Benchmarks might cover aspects of both “Competition” and “Aesthetic Expectations,” but they are not necessarily limited to these. I have often encountered statements like “we want this application to be like XYZ,” where XYZ is unrelated to the project subject. Clients may see XYZ as a standard for service or UX. Understanding your benchmarks before beginning design is crucial; use them to gauge what constitutes “good enough” for the customer and what represents your “Holy Grail.” Keep an open mind and ask for benchmarks from both digital and physical spaces.
  8. Budget, Deliverables, Communication, Feedback, and Deadlines
    Many consider this the most important part of the design brief. Even if you aren’t directly managing the budget, understanding the project’s scale is critical. Establishing the budget should be one of your first inquiries if it isn’t explicitly stated in the brief. Mismatches in this area often lead to major complications.

Budget should be one of the first questions you ask if it’s not clearly stated in the brief. In my opinion, mismatches with client expectations regarding budget can be the most costly for your career. The simplest way to avoid this is to ask. If both sides are satisfied with the response, you can proceed. If the discrepancy is minor, you might continue and negotiate either the budget or the project scope. However, if the difference is significant, it’s generally better to “stop and part ways.” In a corporate environment, you may need to discuss the project with a senior manager or at least raise a “red flag” in an email with related managers in CC.

It’s crucial to note that when businesses mention “budget,” they do not only mean “money.” The size of a project can also be measured in man-hours, man-days, or other agreed-upon units. This serves as an additional lesson for designers. Although the time needed for a creative process is challenging to measure or determine upfront, designers must learn to estimate how long it will take to complete their work. This is essential.

Deliverables are directly connected to the budget. Many designers perceive outputs such as design documentation, screen variations, flow diagrams, and user profiles as mundane tasks that consume time. However, these outputs are necessary for the customer to understand the direction of the work, evaluate the designer’s comprehension of their intentions, and manage the project effectively.

Though it may sound abrasive, it’s important to understand that proper documentation does not create hostility; instead, it equips informed stakeholders to assess the potential success of the project at the design stage. This can lead to budget confirmation, project adjustments, or even a budget extension.

In the context of digital products, deliverables are equally vital to the development team. Early in the design process, developers can suggest changes to the original concept that may lead to greater success or save money. They can also evaluate the technical feasibility of proposed solutions; for this to happen, project participants need to understand what the designer envisions.

With the appropriate outputs established, stakeholders and developers can provide feedback at the right stages of the process.

Feedback and Communication

Proper feedback is crucial for every collaborative project. Ideally, the brief should specify how feedback will be delivered, who will provide it, and how many feedback sessions will be agreed upon. Determining the last number can be tricky when committing to collaborative tools like Figma.

However, it’s important to keep in mind that constant changes in direction due to ongoing feedback can disrupt the project’s flow. It is your responsibility to manage these dynamics. Much of this discussion pertains to communication, so I’ll return to that topic later.

Many designers, especially those with an art direction background, often request inspiration materials as part of the brief. While I appreciate having that input, I prefer to refer to them as benchmarks, considering mood boarding, desk research, and visual benchmarking as part of the designer’s role during the process.

Lastly, it’s essential to clarify who will be the point of contact (POC) between the design or development team and the customer within the brief. A good practice is to define a default POC on both sides, along with deputies. This can save a lot of headaches later on.

Two typical scenarios immediately come to mind: one involving someone being offline during the process, which can hinder communication flow, and the other where too many people want to contribute their opinions during feedback. Ideally, POC roles should be assigned to individuals with sufficient responsibility to manage the project. If this isn’t possible on the customer’s side, ensure that the POC maintains direct communication with the decision-maker.

Difference Between width: 100% and width: auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        color: #fff;
        font-size: 2rem;
        text-align: center;
      }
      .parent {
        width: 600px;
        height: 600px;
        background-color: #2177b8;
        border: 10px solid #21373d;
        padding: 20px;
      }
      .child {
        background-color: #ee3f4d;
        border: 10px solid #d8e3e7;
        margin: 20px;
        height: 100px;
      }
      .auto {
        width: auto;
      }
      .hundred-percent {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      parent
      <div class="child auto">child1: width:auto</div>
      <div class="child hundred-percent">child2: width:100%</div>
    </div>
  </body>
</html>

In this example, we set the parent element to have padding: 20px and gave both child elements margin: 20pxchild1 has a width property of auto, while child2 has a width property of 100%.

Observations

  • child1 (width: auto): The width adapts to the content area of the parent and does not overflow. Final width calculation for child1:

Parent width: 600px

Margin usage: 20px * 2 = 40px

Border usage: 10px * 2 = 20px

Final width = 600px — 40px — 20px = 540px

child2 (width: 100%): The width equals the width of the parent and may overflow. Final width calculation for child2:

Parent width: 600px

Final width = 600px (directly matches the parent width)

Conclusion

  • width: 100%: The content area of the child element fills the content area of the parent. If the child element also has paddingborder, etc., or if the parent has margins and padding, it may cause the child element to overflow.
  • width: auto: The child element’s width is automatically adjusted based on its content, paddingborder, and margin to fit within the content area of the parent.

Therefore, in development, it’s advisable to choose width: auto, as it will better maintain the width relative to the parent element. On the other hand, using width: 100% can result in additional spacing being added to the element’s size, potentially leading to layout issues.

CSS + Regex = Efficiency

CSS offers us three simple yet powerful regex-like tools:

Caret (^): Finds elements where the class starts with specific characters.

  • Example: div[class^="card"] targets all elements whose class names start with card, no matter what follows.

Asterisk (*): Searches for specific characters anywhere in the class name.

  • Example: div[class*="new"] targets elements where new appears, regardless of position.

Dollar Sign ($): Matches classes where specific characters appear at the end.

  • Example: div[class$="prioritize"] targets classes ending with prioritize.

Page 1 of 24

Powered by WordPress & Theme by Anders Norén