contrast-swatch
contrast-swatch copied to clipboard
Published
20 hours ago •
jxnblk
jxnblk
🅰️ Image microservice for color contrast information
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
jxnblk