jxnblk / Contrast Swatch
🅰️ Image microservice for color contrast information
Stars: ✭ 210
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Contrast Swatch
Ruby Gem Downloads Badge
Clean and simple gem downloads count badge, courtesy of http://shields.io/. You can checkout the application directly at the following URL:
Stars: ✭ 29 (-86.19%)
Mutual labels: svg, image, badge, color
Shields
Concise, consistent, and legible badges in SVG and raster format
Stars: ✭ 15,716 (+7383.81%)
Mutual labels: svg, badge
Design System Site
📚 Documentation, rationale and accessibility guidance
Stars: ✭ 72 (-65.71%)
Mutual labels: documentation, accessibility
Website
Website and documentation for Radix.
Stars: ✭ 45 (-78.57%)
Mutual labels: documentation, accessibility
Mathjax
Beautiful and accessible math in all browsers
Stars: ✭ 8,551 (+3971.9%)
Mutual labels: svg, accessibility
Itext7
iText 7 for Java represents the next level of SDKs for developers that want to take advantage of the benefits PDF can bring. Equipped with a better document engine, high and low-level programming capabilities and the ability to create, edit and enhance PDF documents, iText 7 can be a boon to nearly every workflow.
Stars: ✭ 913 (+334.76%)
Mutual labels: svg, accessibility
Uitabbaritem Custombadge
UITabBarItem+CustomBadge is a workaround to change the aspect of IOS UIBadgeView
Stars: ✭ 84 (-60%)
Mutual labels: badge, color
A11y.css
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Stars: ✭ 1,277 (+508.1%)
Mutual labels: documentation, accessibility
I7j Pdfhtml
pdfHTML is an iText 7 add-on for Java that allows you to easily convert HTML and CSS into standards compliant PDFs that are accessible, searchable and usable for indexing.
Stars: ✭ 104 (-50.48%)
Mutual labels: svg, accessibility
Contrast Finder
Contrast-Finder finds correct color contrasts (background / foreground) for web accessibility (a11y, WCAG, RGAA). https://app.contrast-finder.org
Stars: ✭ 38 (-81.9%)
Mutual labels: accessibility, color
Php badge
This is an identification tag based on SVG, It can quickly generate various labels and status identifiers
Stars: ✭ 101 (-51.9%)
Mutual labels: svg, badge
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-88.57%)
Mutual labels: accessibility, color
Openhtmltopdf
An HTML to PDF library for the JVM. Based on Flying Saucer and Apache PDF-BOX 2. With SVG image support. Now also with accessible PDF support (WCAG, Section 508, PDF/UA)!
Stars: ✭ 1,096 (+421.9%)
Mutual labels: svg, accessibility
Pixterm
Draw images in your ANSI terminal with true color
Stars: ✭ 782 (+272.38%)
Mutual labels: image, color
Iro.js
🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats
Stars: ✭ 796 (+279.05%)
Mutual labels: svg, color
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-63.33%)
Mutual labels: svg, image
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-46.67%)
Mutual labels: documentation, svg
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].