hremonen / swiftcontrast Goto Github PK

HTML color input is browser specific thus making it not uniform form all users.
However the color input must be accessible.

Experiment with different color pickers if there would be something good that checks all the boxes.

This would possibly create unwanted dependencies.

• Add functionality for pasting clip board content to the input field. Perhaps a mouse button, like the scroll button would work.

Conside the following stack to bootstrap the project: https://create.t3.gg/

• Run lint
• Run static analysis tool like codeclimate or whatever
• Run tests
• Setup release to Vercel

• Explain how the thing works. Above the "main part", make it an accordion however
• Add explanations for the different WCAG success criteria

We do not want to paste from the clipboard if the pasted value is not hex.

This would make the ux better. Pasting something from the clipboard accidentally for example now is a bit pain in the ass.
Also reconsider if the paste should be behind a button and the copying should be by double-click.

• https://react-spectrum.adobe.com/react-aria/components.html

Links add more complexity to the color contrast requirements.
Links should be underlined, otherwise the text must have at least 3:1 contrast with the surrounding body text. Also links must have hover and focus indicators.

Additionally the link text and the body text must have at least 4.5:1 (small text) contrast with the background or 3:1 with large text.

Create a new "feature" that is used solely for checking the contrast ratios of links

• Input for link color (the text of the link)
• Input for the body text color (the color of the text that is surrounding the link)
• Input for the background color (the color that is surrounding the paragraph or whatever)

• Create some kind of button for the copy

Add a slider for lightness, this should also affect the contrast ratio obviously