cds-snc / cds-snc/platform-forms-client

Hint text is small and does not have strong colour contrast

Open Beginner friendly
#7,900 0 comments 0 reactions 0 assignees View on GitHub
a11y bug end users
Dominant language
TypeScript
Stars
46
Forks
16
Avg merge
1d 8h
Merged PRs (30d)
85

Description

## Context

From client: results of their form in fable testing:

> Ran 20 accessibility tests using Fable (10 in English and 10 in French). The accessibility tests mainly focused on screen reader compatibility, with a couple tests using screen magnification tools.

https://cds-snc.freshdesk.com/a/tickets/30088

## Description

**Helper text being too small and having low colour contrast when using magnification.**

## Findings

**4 issues related to small and low contrast helper text** (testers used OS Magnification with Safari)

“The descriptive text below the question on this page is more difficult to read as it is smaller and the colour contrast is poor.”

## Examples

> "The colour of the sentence under the question on this page makes the text difficult to read as the colour contrast is poor."

> "The text advising the user to select any option that applies is hard to read as it is in smaller font to the questions or the options provided."

> "Same issue as before, the text under the "Adresse courriel" field is hard to read due to poor colour contrast."

**Relevant WCAG criteria: 1.4.3 Contrast (Minimum)**

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the helper-text examples described in the issue with Safari and OS Magnification. Inspect the relevant form UI styles, then verify that the text is easier to read and meets WCAG 1.4.3 contrast requirements.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.