DesignChecker: Visual Design Support for
Blind and Low Vision Web Developers

Mina Huh, Amy Pavel
UT Austin
ACM UIST 2024
ArXiv
A teaser figure for DesignChecker. On the left side is a user's original blog website. All the text content is anonymized and replaced with filler text Lorem ipsum .... It has yellow background, dark grey header, light grey footer, and a dark yellow login bar on the right. In the header, the menu items' color is black and not legible with low contrast against the dark background color. Next to the user's original website are two text boxes visualizing DesignChecker's two main features. High-level Design Comparison summarizes the font styles of the current website, reference website, and website trends. (current website: Your website primarily uses Times New Roman, which may not offer the best readability. reference website: This blog uses Helvetica Neue for titles which gives a modern, clean look. website trends: Popular title fonts for blogs are Arial and Verdana. Popular body fonts are Roboto and Open Sans). Low-level Design Suggestions show examples of suggestions for two design aspects, color contrast and text layout. Each suggestion lists the CSS group that has the design issue, HTML text, Suggestion, and example solution. Next to the DesignChecker's features is the user's new web design edited using DesignChecker's suggestions. It has more whitespace between the text elements and has lighter color background for both main body and header which provides improved readability. DesignChecker is a browser extension that helps BLV web developers to improve their web design. With Design Comparison, users can easily assess their current web design by comparing it to visual design guidelines, a reference website of their choice, and a trend of similar websites. With Design Suggestions, users can quickly identify HTML elements with the issue and resolve the issue by following the CSS suggestions.

Abstract

Blind and low vision (BLV) developers create websites to share knowledge and showcase their work. A well-designed website can engage audiences and deliver information effectively, yet it remains challenging for BLV developers to review their web designs. We conducted interviews with BLV developers (N=9) and analyzed 20 websites created by BLV developers. BLV developers created highly accessible websites but wanted to assess the usability of their websites for sighted users and follow the design standards of other websites. They also encountered challenges using screen readers to identify illegible text, misaligned elements, and inharmonious colors. We present DesignChecker, a browser extension that helps BLV developers improve their web designs. With DesignChecker, users can assess their current design by comparing it to visual design guidelines, a reference website of their choice, or a set of similar websites. DesignChecker also identifies the specific HTML elements that violate design guidelines and suggests CSS changes for improvements. Our user study participants (N=8) recognized more visual design errors than using their typical workflow and expressed enthusiasm about using DesignChecker in the future.

System

The figure illustrates the popup of DesignChecker overlayed on the user's website. It shows two checkboxes - Reference Website, Website Trends and for choosing the trend, there are 5 toggle buttons (options) blog, tutorial, personal website, organizational website, news/magazine.

DesignChecker is a browser extension that helps BLV web developers to improve their web design. When activated, DesignChecker overlays a popup where users can select the options for Design Comparison: a reference website and website trends.



This figure shows the overview of DesignChecker's results. On the top, the design issue summary reads 6 Text Issues, 7 Layout Issues, 5 Color Issues. Design Comparison provides the following text: [Current Website: It primarily uses the font Times New Roman, which may not offer the best readability. Guidelines: Sans-serif fonts are more legible than Serif. Use decorative and narrow fonts for decorative texts only. Reference Website: It uses Helvetica Neue for titles which gives a modern, clean look. It uses source-serif-pro and Georgia for body text. Website Trends: Common title font families: Arial, sohne, madefor-text. Common body font families: Open Sans, Roboto, Arial] Design Suggestions provide the following text: [CSS Group: p-metadata HTML Text: Date: August 29, 2023 | Author: Joey Suggestion: Suggestion: You did not specify a font-family and it uses the default Times New Roman. Consider changing to a Sans-Serif font like Arial, Example Solution: font-family: Arial, Helvetica, sans-serif;]

DesignChecker runs a design analysis of the current webpage and opens the results in a new window. Design Issue Summary (A) provides the overview of issues in the current design. Design Comparison (B) enables users to assess their current design using 3 different resources: visual web design guidelines (default), a reference website of their choice, and a trend of similar websites. Design Suggestions (C) provides the list of elements that failed (Issues) or fulfilled (Passes) the requirements of design guidelines. Each Design issue (D) identifies the specific HTML elements causing the issue and suggests CSS changes.

Pipeline

Pipeline of DesignChecker that generates Design Comparison and Design Suggestions from the user's website. From the input website, DesignChecker extracts HTML and CSS and groups HTML elements that share the same CSS classes. Identified issues and the relevant guideline suggestions are presented in Design Suggestion. DesignChecker compares the current website's evaluation results with the recommended values in the guidelines, the reference website, and similar websites. The summary of the comparison is presented in Design Comparison.



This figure illustrates how DesignChecker improves the color harmony of users' website. On the left, user's example website is shown (same design shown in the teaser image). The pipeline first extracts the primary color yellow from the original website's background. Then using Material Design 3's algorithm, it generates color palette using the primary color and output primary, secondary, tertiary, surface, container, error, outline, and more colors for various roles. Then the definitions of the roles, color palette, and the website code are fed into GPT-4 which recommends new colors for different UI elements.

To improve color harmony, DesignChecker first extracts the primary color from the original web design and generates a color palette for pre-defined roles (e.g., surface, outline) [7]. Using the definitions of color roles and the gen- erated palette, GPT-4 suggests colors for UI elements.

Results

This figure shows before and after the design of 5 websites of BLV developer edited with DesignChecker (A-E). Website A and D is light mode (bright background, dark text) and B, C, E is in dark mode (dark background with lighter text). The after version edited with DesignChecker keeps the original setting (light or dark mode) but improves the color harmony and text legibility in all websites. DesignChecker edits also introduced more whitespace to separate and align UI elements for A, C, and D. While the original B website had a blue logo image and red text on a black background, the retargeted version changed to blue text which better matches the color of the logo.

BLV developers’ websites edited using DesignChecker (Top: original, Bottom: edited). DesignChecker increased the color contrast of text (A-B, D), introduced more whitespace to separate and align UI elements (A, C-D), and improved color harmony (A-E).

BibTeX

@article{huh2024designchecker,
        title={DesignChecker: Visual Design Support for Blind and Low Vision Web Developers},
        author={Huh, Mina and Pavel, Amy},
        journal={arXiv preprint arXiv:2407.17681},
        year={2024}
      }