Web: Useful Tool - Colour Contrast Checker

Color Contrast Checker

W3C Web Content Accessibility Guidelines (WCAG)
WGAG Level AA's Requirement:
  • Noraml text: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
  • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;


WebAIM
Colour Contrast Analyser (CCA) | TPG – Digital Accessibility Solutions
https://developer.paciellogroup.com/resources/
https://developer.paciellogroup.com/resources/contrastanalyser/
https://github.com/ThePacielloGroup/CCA-Win/releases/

Google

Contrast Ratio: Easily calculate color contrast ratios
https://contrast-ratio.com/

Contrast Checker
https://contrastchecker.com/

Colour Contrast Check - snook.ca

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
http://accessible-colors.com/

Color Contrast Checker
https://www.levelaccess.com/compliance-resource/color-contrast-checker/

Color Contrast Checker / Analyzer
https://www.sbwfc.co.kr/ColorChecker/

Reference

Top seven free color contrast checkers & analyzers - Axess Lab
https://axesslab.com/top-color-contrast-checkers/

Color Contrast Tools | Web Axe
http://www.webaxe.org/color-contrast-tools/



留言

張貼留言

這個網誌中的熱門文章

W3C: Standards and Guidelines (HTML)

W3C - Standards and Guidelines (HTML) Standards - W3C https://www.w3.org/standards/ https://www.w3.org/standards/webdesign/htmlcss https://www.w3.org/standards/webdesign/script.html https://www.w3.org/standards/webdesign/accessibility.html https://www.w3.org/standards/webdesign/i18n.html https://www.w3.org/standards/webdesign/mobilweb.html https://www.w3.org/standards/webdesign/privacy.html https://www.w3.org/standards/webdesign/math.html Latest Version of HTML https://www.w3.org/TR/html/ HTML 5 http://www.w3.org/TR/html5/ HTML 5.3: W3C Working Draft, 09 August 2018 https://www.w3.org/TR/html53/ HTML 5.2: W3C Recommendation, 14 December 2017 https://www.w3.org/TR/html52/ HTML 5.1 2nd Edition: W3C Recommendation 3 October 2017 https://www.w3.org/TR/html51/ HTML5: A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014 https://www.w3.org/TR/html50/ HTML5 Differences from HTML4 https://www.w3.org/TR/html5-diff/ HTML 4 L...
閱讀完整內容

Web: Useful Tool - Dead link / Broken Link Checker

Broken Link Checker Online Service (Free) W3C Link Checker https://validator.w3.org/checklink https://github.com/w3c/link-checker Free Broken Link Checker - Online Dead Link Checking Tool https://www.brokenlinkcheck.com/ Free Broken Link Checking Tool - Dead Link Checker https://www.deadlinkchecker.com Freeware Xenu's Link Sleuth http://home.snafu.de/tilman/xenulink.html Screaming Frog SEO Spider Tool & Website Crawler | Screaming Frog (Free for 500 URLs and limited features) https://www.screamingfrog.co.uk/seo-spider/ Shareware SortSite: Website Error Checker: Accessibility & Link Checker  https://www.powermapper.com/products/sortsite/ https://www.powermapper.com/products/sortsite/tests/ https://www.powermapper.com/products/sortsite/checks/browser-compatibility/ https://www.powermapper.com/products/sortsite/checks/link-checker/ https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ Reference Broken Lin...
閱讀完整內容

HTML - Color

HTML -  Color  Modern browsers support 140 named colors! Background /Text color can use following color values: Hexadecimal color codes (e.g. color:#FF0000) Color names (e.g. color:orange) RGB values (e.g. color:rgb(255,0,255)) rgb( RED , GREEN , BLUE ) rgba() – a is for alpha, a color channel that controls opacity value from 0 – 1 (0: Transparent, 0.1, ..., 1 for fully opaque) color:rgba(255,0,255,0.3) HSL values (e.g. color:hsl(0,100%,60%)) (CSS3) HSL: Hue, Saturation and Lightness HWB values (CSS4) Example Background Color <body style="background-color:powderblue;"> Text Color <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> <span style="color:orange;">This is a paragraph.</span> W3C CSS Snapshot 2017 https://www.w3.org/TR/CSS/#css Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification https://ww...
閱讀完整內容