Skip to content
This repository has been archived by the owner on Jan 31, 2023. It is now read-only.
/ contrast-swatch Public archive

🅰️ Image microservice for color contrast information

Notifications You must be signed in to change notification settings

jxnblk/contrast-swatch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

![color contrast indicator](https://contrast.now.sh/cff/07c)

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