Currently when navigating to the swatches via a screenreader, there is no information about what background and foreground colour is on the swatch and that you can append the colours.

Do you want to request a feature or report a bug?
Feature

What is the current behaviour?
N/A

If the current behaviour is a bug, please provide the steps to reproduce.
N/A

What is the expected behaviour?

If this is a feature request, what is motivation or use case for changing the behavior?
APCA is a fairly new and better way to calculate colour contrast. It will be introduced as the way to check in WCAG 3.0 but other tools such as Stark have started implementing a toggle so can check both WCAG conformance contrast and APCA.

Please mention other relevant information.

• Node version
• npm version
• Operating system
• CLI version
• Browser

The function would be to inform if the color has a good reading contrast for color blind people.

If the color does not have a good contrast, a button will appear to automatically adjust the color to another similar contrast accepted for that level

Add splash screens for PWA app on IOS devices

Add button to allow user to reverse background and foreground colours

Add skip links to allow accessible navigation

Re: the font sizes at the bottom of the Colour Contrast Checker web page:

The headings are "large text - 14pt" and "normal copy - 16px".

WCAG 2.1 defines "large text" as "at least 18 point or 14 point bold". The Understanding Success Criterion page further states that "The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px". Since the large text's example copy is not bold, its font size should be 18pt/24px, not 14pt/18.5px.

Add app features to readme to give users an insight into how the app works

Simple monochrome "Checkmark" and "Cross" icons will make the UI 10x more readable

Bug Report

What is the current behaviour?
When entering "#f0f0", the app autocompletes to "#ff00ff".

What is the expected behaviour?
There should be no autocompletion for the given value, as values like "#F0F0F0" couldn't be entered otherwise.

Please mention other relevant information.
CHROME VERSION |   | 102.0.5005.61
OS VERSION |   | Mac OS X: 12.2.0

Do you want to request a feature or report a bug?

Bug

What is the current behaviour?

It's not working

If the current behaviour is a bug, please provide the steps to reproduce.

Click the icon nothing happens in Brave Version 1.17.73 Chromium: 87.0.4280.67 (Official Build) (x86_64)

What is the expected behaviour?

The panel should launch

If this is a feature request, what is motivation or use case for changing the behaviour?

Please mention other relevant information.

• Node version
• npm version
• Operating system
• CLI version
• Browser

Since the background color changes based on the colors being compared, the tool itself can fail WCAG contrast requirements.

When I compared #C4C4C4 and #FFFFFF, the page heading ("colour contrast checker) and HSL sliders fail contrast requirements:

In this example, the background colour is #C4C4C4 (contrast of 1.74 to background), the heading color is #FFFFFF, and the slider bars are #939393 (contrast of 1.76 to background).

I would recommend not changing the whole tool's background colour, and having a preview swatch instead.