colorsafe.co
Open in
urlscan Pro
192.30.252.153
Public Scan
URL:
http://colorsafe.co/
Submission: On February 14 via api from US — Scanned from DE
Submission: On February 14 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form accept-charset="utf-8" class="mtm-ns cf">
<section class="phm pvm-ns text-white mw-950 center cf">
<div class="prl-ns tal span_3_of_12 fl">
<label for="backgroundColor" class="mvs db">Background Color</label>
<input colorpicker="" colorpicker-position="top" id="backgroundColor" class="pas f4 wi-full inputColor input ease" type="text" name="textfield" placeholder="Type hex or rgb value" ng-model="backgroundColor.hex">
</div>
<div class="prl-ns tal span_3_of_12 fl">
<label for="fontFamily" class="mvs db">Font-Family</label>
<div class="pos-rel">
<select name="fontFamily" id="fontFamily" class="pvs phm f4 wi-full inputColor select" ng-model="fontFamily" ng-options="font.alias for font in allFontFamilies"></select>
</div>
</div>
<div class="prl wi-half-s span_2_of_12-ns fl">
<label for="fontSize" class="mvs db">Font-Size (px)</label>
<input id="fontSize" class="pas f4 wi-full inputColor input ease" type="text" name="textfield" ng-model="fontSize">
</div>
<div class="prl-ns wi-half-s span_2_of_12-ns fl">
<label for="fontWeight" class="mvs db">Font-Weight</label>
<div class="pos-rel">
<select name="fontWeight" id="fontWeight" class="pvs phm f4 wi-full inputColor select ease" ng-model="fontWeight" ng-options="value for value in fontWeights"></select>
</div>
</div>
<div class="span_2_of_12 fl">
<label for="WCAGlevel" class="mvs db pos-rel" ng-mouseenter="toggleWCAGToolTip()" ng-mouseleave="toggleWCAGToolTip()">
<div class="pam dn db-ns text-dark pos-abs pos-WCAGToolTip-ns bg-white br-m" ng-if="showWCAGToolTip"> Most of the time, AA is good enough. However some companies and government institutions must meet the AAA level of conformance. <span
class="pvm db">
<a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" class="ease link-drk">Learn more at W3C</a>
</span>
<span class="arrow-down-ns pos-arrow-down-ns"></span>
</div> WCAG Standard <a href="javascript:void(0)" ng-click="toggleWCAGToolTip()">
<span class="dn di-ns ss-info pos-abs right-0 text-white"></span>
<span class="assistive-text">Click for more info on WCAG levels</span>
</a>
</label>
<div class="pos-rel">
<select name="WCAGlevel" id="WCAGlevel" class="pvs phm f4 wi-full inputColor select ease" ng-model="WCAGlevel" ng-options="grade for grade in accessibilityGrades"></select>
</div>
</div>
</section>
<!-- TODO: make less hacky -->
<div id="pinToolbar" ng-class="{ 'ht-pinToolbar': pinToolbar }"></div>
<section ng-class="{ 'pinToolbar z-above pos-abs wi-full': pinToolbar }">
<div class="phm ptm mw-toolbar center cf">
<section class="span_4_of_12 border-dark-s opacity-0-ns fl l-slideOutFadeInAni-ns" ng-show="pinToolbar">
<div class="wi-20-s span_3_of_12-ns ht-75 pos-rel fl ease" ng-style="setTileBgColor(currentTextColor);">
<span class="arrow-right-ns pos-arrow-right-ns ease" style="border-left: 10px solid {{currentTextColor.hex}};"></span>
</div>
<button type="button" id="copyHexValue" data-clipboard-text="{{currentTextColor.hex}}" title="Click to copy hex color" class="phm tac wi-40-s span_5_of_12-ns ht-75 fl bg-light-gray ease" ng-click="showInstructions2(currentTextColor)"
ng-show="colorModel.label === 'hex'">
<span ng-class="{ 'animated-delay1 bounceIn': animateToolbar }" class="f4 lht-75 ff-lato fw-light">{{currentTextColor.hex}}</span>
</button>
<button type="button" id="copyRgbValue" data-clipboard-text="rgb({{currentTextColor.rgb}})" title="Click to copy rgb color" class="phm tac wi-40-s span_5_of_12-ns ht-75 fl bg-light-gray ease" ng-click="showInstructions2(currentTextColor)"
ng-show="colorModel.label === 'rgb'">
<span ng-class="{ 'animated-delay2 bounceIn': animateToolbar }" class="f4 lht-75 ff-lato fw-light">rgb({{currentTextColor.rgb}})</span>
</button>
<div class="phm wi-40-s span_4_of_12-ns ht-75 fl bg-light-gray ease pos-rel">
<select name="colorModel" id="colorModel" class="plm prl f4 caps lht-75 select-colorModel ease" ng-model="colorModel" ng-options="model.label for model in colorModels"></select>
</div>
</section>
<div id="userContentTextArea" class="dn-s tal mw-950 center" ng-class="{ 'phm-ns': !pinToolbar, 'span_5_of_12 fl': pinToolbar }">
<label for="userContent" class="mvs text-white db" ng-if="!pinToolbar">Editable Text</label>
<input id="userContent" ng-style="setUserContentStyles(fontFamily.name, fontSize, fontWeight, backgroundColor.hex, currentTextColor.hex)" class="ht-75 tac wi-full bg-white ban" ng-class="{ 'br-s': !pinToolbar }" ng-model="userContent">
</div>
<section class="span_3_of_12 fl-ns opacity-0-ns r-slideOutFadeInAni-ns cf" ng-if="pinToolbar">
<div class="phm pvs tac wi-half ht-75 bg-light-gray fl dt">
<div class="dtc vac">
<span class="f5 db">Current Ratio</span>
<span>{{currentTextColor.currentRatio}}</span>
<span class="mls text-green fa fa-check" ng-if="currentTextColor.pass"></span><span class="assistive-text" ng-if="currentTextColor.pass">Pass</span>
<span class="mls text-red fa fa-ban" ng-if="!currentTextColor.pass"></span><span class="assistive-text" ng-if="!currentTextColor.pass">Fail</span>
</div>
</div>
<div class="phm pvs tac wi-half ht-75 bg-light-gray fl dt">
<div class="dtc vac">
<span class="db f5">Goal Ratio</span>
<span ng-class="{ 'animated-delay1 bounceIn': updatedWCAGlevel }">{{WCAGlevel}} - {{currentRatio}}</span>
</div>
</div>
</section>
</div>
<section class="phm mw-toolbar center fadeInAni cf" ng-show="pinToolbar">
<ul class="pan dn db-ns fl-ns list-plain list-horz">
<li class="mhxs caps tac fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-all-filter bg-all-filter li-item-js" data-filter="all">
<button type="button" title="Show all">
<p class="f5 caps tac fw-700 lhxs"><span class="assistive-text">Show </span>All</p>
</button>
</li>
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white {{ 'br-' + color.name + '-filter'}} {{'bg-' + color.name + '-filter'}} li-item-js"
data-filter=".category-{{color.name}}">
<button type="button" title="Filter by {{color.name}}">
<p class="f5 caps tac fw-700 lhxs opacity-0"><span class="assistive-text">Filter by </span>{{color.name}}</p>
</button>
</li>
</ul>
<div class="mtm mbm-s tac fr-ns">
<button type="button" class="phm mrm-sm mrm-ns f5-ns ff-montserrat text-white dib pos-rel btn-secondary bg-darker ease" ng-click="slideToElement('section1', 400)">
<span class="mrs text-green fa fa-refresh"></span> Start Over </button>
<button type="button" class="phm f5-ns ff-montserrat text-white dib btn-secondary bg-darker ease" ng-click="toggleInfoPanel();">Who Made This</button>
</div>
</section>
</section>
<button type="button" class="pvm phl mvl db caps f4 ff-montserrat fw-bold center btn-primary ease" ng-click="slideToElement('userContentTextArea', 900); getCurrentRatio(); getPassingColors(); showInstructions1($event); activatePalette();"
ng-show="!pinToolbar" tabindex="{{blurGenerateBtn}}">Generate Color Palette</button>
</form>Text Content
COLOR SAFE
Empowering designers with beautiful and accessible color palettes based on WCAG
Guidelines of text and background contrast ratios.
Get Started
SET UP CANVAS AND TEXT
Enter a background color, and determine the styling of your text. Accessible
text colors are generated with
WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large
text which is 24px or 18px bold.
Background Color
Font-Family
Font-Size (px)
Font-Weight
Most of the time, AA is good enough. However some companies and government
institutions must meet the AAA level of conformance. Learn more at W3C
WCAG Standard Click for more info on WCAG levels
{{currentTextColor.hex}} rgb({{currentTextColor.rgb}})
Editable Text
Current Ratio {{currentTextColor.currentRatio}} Pass Fail
Goal Ratio {{WCAGlevel}} - {{currentRatio}}
* Show All
* Filter by {{color.name}}
Start Over Who Made This
Generate Color Palette
* Copied!
HEX: {{color.hex}} RGB: {{color.rgb}}
WANT MORE COLOR OPTIONS?
Changing the WCAG level to AA is less strict and will give you more color
options.
Try it
WANT MORE COLOR OPTIONS?
Increase font size to 24px or make font weight bold. Doing one of those will
make the text 'Large Text' and give you more color options.
Change Font Size to 24px
Make font bold
Try it
Close Color Safe Info Panel
BROUGHT TO YOU WITH LOVE.
We built this tool to help designers select color combinations that allow users
to read their content regardless of different visual capabilities and screen
resolutions based on WCAG Guidelines.
Thanks for checking out our tool. We’d love your feedback. Send us a message!
Donielle Berg
UX Engineer
donielleberg.com
Adrian Rapp
Product Designer
adrianrapp.com
PICK A COLOR TO SET THE TEXT COLOR
Click on a color square to preview text color in the upper toolbar. Click on the
Hex or RGB value in the toolbar to copy to your clipboard.
Got it
{{CURRENTCOPIEDCOLOR.HEX}}
RGB({{CURRENTCOPIEDCOLOR.RGB}})
Copied to Clipboard!
{{instructions3message}}
Got it