hremonen / swiftcontrast Goto Github PK

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)

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

• Create some kind of button for the copy

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

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	eslint-config-standard-with-typescript

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace dependency eslint-config-standard-with-typescript with eslint-config-love ^43.0.1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency next to v14.1.1 [security]
• chore(deps): update dependency @tailwindcss/typography to v0.5.14
• chore(deps): update dependency autoprefixer to v10.4.20
• chore(deps): update dependency postcss to v8.4.41
• chore(deps): update dependency tailwindcss to v3.4.10
• fix(deps): update dependency lint-staged to v15.2.9
• chore(deps): update dependency @types/node to v20.14.15
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency eslint-config-next to v14.2.5
• chore(deps): update dependency eslint-plugin-prettier to v5.2.1
• chore(deps): update dependency eslint-plugin-promise to v6.6.0
• chore(deps): update dependency eslint-plugin-react to v7.35.0
• chore(deps): update dependency prettier to v3.3.3
• chore(deps): update dependency prettier-plugin-tailwindcss to ^0.6.0
• chore(deps): update dependency typescript to v5.5.4
• chore(deps): update react monorepo to v18.3.3 (@types/react, @types/react-dom, react, react-dom)
• fix(deps): update dependency @typescript-eslint/eslint-plugin to v6.21.0
• fix(deps): update dependency @vercel/analytics to v1.3.1
• fix(deps): update dependency eslint-plugin-jsx-a11y to v6.9.0
• fix(deps): update dependency next-themes to ^0.3.0
• chore(deps): update actions/checkout action to v4
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-airbnb-typescript to v18
• chore(deps): update dependency eslint-plugin-n to v17
• chore(deps): update dependency eslint-plugin-promise to v7
• fix(deps): update dependency @typescript-eslint/eslint-plugin to v8
• fix(deps): update dependency husky to v9
• fix(deps): update dependency react-icons to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

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 a slider for lightness, this should also affect the contrast ratio obviously

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

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

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.

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