Short answer

Shift from 'color-reliant' to 'color-redundant' design by always pairing color information with a secondary visual signifier like text or icons.

Field: User-Centred Design
Source: Academic Publication (2024)
Method: Usability testing (Success rate and efficiency metrics)
Sample: 10 participants
Evidence: Strong effect

Providing redundant visual cues (text labels + high contrast) bypasses the cognitive load of distinguishing between ambiguous color values. This user-centred design research insight is drawn from a 2024 study published in Academic Publication. Using Usability testing (success rate and efficiency metrics) with 10 participants, researchers explored how this design variable affects real-world outcomes. The key design takeaway: Shift from 'color-reliant' to 'color-redundant' design by always pairing color information with a secondary visual signifier like text or icons.

Study

User-Centred DesignRecentStrong effect

High-contrast adaptive layouts and labeled swatches increase task success for color-blind users

Providing redundant visual cues (text labels + high contrast) bypasses the cognitive load of distinguishing between ambiguous color values.

Academic Publication · 2024

Key Findings

01High-contrast color schemes achieved a 94.44% task success rate among color-blind users.
02Text-based labels for color swatches significantly reduced selection errors.
03Adaptive layouts and clear call-to-action (CTA) elements improved time-based navigation efficiency.
04Accessible error indicators (using icons, not just red text) prevented form submission abandonment.

Application

Design takeaway

Shift from 'color-reliant' to 'color-redundant' design by always pairing color information with a secondary visual signifier like text or icons.

How to apply

Audit existing e-commerce product pages: add text tooltips or persistent labels to color pickers and ensure all 'Error' or 'Success' messages contain a unique icon.

Project actions

01Include a 'color-blind mode' toggle in your UI prototypes to demonstrate empathy.
02Use online simulators (like Toptal or Coblis) to check if your design is readable for different types of color blindness.
03Don't just use green for 'Go' and red for 'Stop'—add labels like 'Enter' or 'Cancel'.

Method & Evidence

AimTo evaluate the effectiveness of integrating accessibility-focused UI elements on the usability and task success rates of e-commerce platforms for color-blind users.

MethodUsability testing (Success rate and efficiency metrics)

ProcedureParticipants with various types of color blindness completed specific purchasing tasks on a specialized e-commerce website featuring high-contrast schemes, labeled color swatches, and adaptive layouts.

Sample10 participants

ContextE-commerce web development

Variables

IVPresence of accessibility-focused UI elements (high-contrast schemes, labeled color swatches, adaptive layouts) versus standard UI elements on an e-commerce website.

DVTask success rate (percentage of successful task completions) and efficiency (time taken to complete tasks).

CVType of color blindness among participants, complexity of purchasing tasks, specific e-commerce platform interface (apart from the tested elements), testing environment, and instructions given to participants.

Strengths & Limitations

Strengths

+Directly addresses a significant accessibility issue in e-commerce, aligning with inclusive design principles.
+Employs quantitative metrics (success rate, efficiency) for objective task performance evaluation.
+Focuses on a specific user group (color-blind individuals) allowing for targeted analysis of UI effectiveness.

Limitations

Since the study used a small group of 10 people, a student project might need to combine this research with established industry standards (like WCAG) to make a stronger argument.

Reliability & validity

The study's quantitative approach enhances internal validity by focusing on measurable outcomes, while the use of specific tasks improves ecological validity within the e-commerce context. However, the small sample size (n=10) significantly limits generalizability, potentially impacting external validity. The exclusion of animation testing means a specific aspect of user experience is not fully explored, limiting the completeness of the findings. Reliability could be high if tasks and scoring are standardized, but variations in individual color-blindness severity could introduce variability.

Think critically

If a design is perfectly accessible to color-blind users but aesthetically 'ugly' to others, how should a designer find a balance without compromising usability?

Design Principles

"Multimodal Accessibility Redundancy"

Visual impairments like color blindness often create barriers during high-stakes actions like product selection or form submission. When designers rely solely on color to convey meaning, they exclude a significant portion of the population from independently completing digital transactions.

What This Means for Your Design

If you design a website using high-contrast colors and add text labels to things like color buttons, people who are color-blind can use it just as easily as anyone else.

How to use in your project

1.Reference this study when justifying your choice of a high-contrast color palette in your Design Specification.
2.Use the '94.44% success rate' to argue why adding text labels to UI components is a proven usability win.

Add to My Project

Quick Cite

Paragraph starter

According to research by Herlina (2024), integrating text labels and high-contrast layouts can lead to a 94.44% success rate for color-blind users, highlighting the necessity of multi-modal feedback beyond simple color-coding.

Source

Academic Publication

Integrating Accessibility Features and Usability Testing for Inclusive Web Design

journal · 2024

View source

Questions About This Research

What does the research say about high-contrast adaptive layouts and labeled swatches increase task success for color-blind users?: Shift from 'color-reliant' to 'color-redundant' design by always pairing color information with a secondary visual signifier like text or icons. Evidence: Academic Publication (2024).
Why does "High-contrast adaptive layouts and labeled swatches increase task success for color-blind users" matter for design?: Visual impairments like color blindness often create barriers during high-stakes actions like product selection or form submission. When designers rely solely on color to convey meaning, they exclude a significant portion of the population from independently completing digital transactions.
How can designers apply this research?: Shift from 'color-reliant' to 'color-redundant' design by always pairing color information with a secondary visual signifier like text or icons.
What were the main findings?: High-contrast color schemes achieved a 94.44% task success rate among color-blind users.. Text-based labels for color swatches significantly reduced selection errors.. Adaptive layouts and clear call-to-action (CTA) elements improved time-based navigation efficiency.. Accessible error indicators (using icons, not just red text) prevented form submission abandonment.
What research method was used?: Usability testing (Success rate and efficiency metrics) with 10 participants.
How strong is the evidence?: Evidence strength is rated Strong effect, based on a 2024 journal from Academic Publication.
What should I do differently in my next project?: Audit existing e-commerce product pages: add text tooltips or persistent labels to color pickers and ensure all 'Error' or 'Success' messages contain a unique icon.
What are the limitations?: The small sample size (10) may not capture the full spectrum of color vision deficiencies; specific animation impacts were recommended but not extensively tested.