Contrast Swatch Save Abandoned
🅰️ Image microservice for color contrast information
Project README
Contrast Swatch
Image microservice for color contrast information
Usage
Contrast swatch images can be used in any place an image is rendered. The URL accepts a foreground and background color.
https://contrast.now.sh/cff/40f
HTML
<img src="https://contrast.now.sh/cff/07c" alt="color contrast indicator" />
Markdown
React
You can wrap the image in a React component (or any templating engine) for generating documentation.
import React from 'react'
export default ({
foreground,
background,
...props
}) =>
<img
{...props}
src={`https://contrast.now.sh/${foreground}/${background}`}
alt='color contrast indicator'
/>
RGB
Compare two rgb values, or an rgb and a hex value:
https://contrast.now.sh/rgb(204,255,255)/40f
Customization
Use URL queries to customize the styles.
https://contrast.now.sh/cff/40f?width=256&height=96&fontSize=1.25
Pass/Fail Label
Font Size
Size
Width & Height
Custom Text
Font Weight
Radius
Options
| Option | Description |
|---|---|
size |
Width & height in pixels |
width |
Width of image in pixels |
height |
Height of image in pixels (font size will scale based on height) |
fontSize |
Relative font size (default 1) |
fontWeight |
Font weight (default 1) |
label |
Show a pass/fail label based on the WCAG Criteria |
radius |
Border radius |
baseline |
Shift text baseline down |
text |
Render any custom text |
Metadata
A JSON response with color contrast information can be fetched by adding the type=json query to the URL.
https://contrast.now.sh/cff/40f?type=json
Note: the returned JSON schema might change in a future version
Related
MIT License
Open Source Agenda is not affiliated with "Contrast Swatch" Project. README Source: jxnblk/contrast-swatch
Stars
209
Open Issues
2
Last Commit
4 years ago
Open Source Agenda Badge
