log inhelp

 | 
View
 

Colour Contrast Analysis

Page history last edited by Matt 16 years, 10 months ago

Quick check of existing BCCDIY styles using the Juicy Studio analyser.

 

Based on Customer Relations Team page.

 

Summary of Failures
  Failures
Luminosity Contrast Ratio 0
Difference in Brightness 0
Difference in Colour 43
Colour Contrast Results (all tests)
Element Parent Nodes Sample Colour Background Luminosity Contrast Ratio Difference in Brightness Difference in Colour
DIV

id: the_event
  • HTML
  • BODY.blueprint
  • DIV.container
 Sample #333333 #eeeeee 10.89:1 (pass at level AAA) 187 (pass) 561 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#the_event
 Sample #0066ff #eeeeee 4.17:1 (AA pass for large text only) 149 (pass) 391 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#skip
  • DIV#jump
 Sample #666666 #ffffff 5.74:1 (AAA pass for large text; AA for regular text) 153 (pass) 459 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#user_menu
  • LI.signup
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#user_menu
  • LI.login
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
SPAN

class: logotype
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#logo_and_breadcrumb
  • H1#logo
  • A.logolink
 Sample #000000 #ffffff 21:1 (pass at level AAA) 255 (pass) 765 (pass)
SPAN

class: beta
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#logo_and_breadcrumb
  • H1#logo
  • A.logolink
  • SPAN.logotype
 Sample #000000 #ffffff 21:1 (pass at level AAA) 255 (pass) 765 (pass)
DIV

id: breadcrumb
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#logo_and_breadcrumb
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#logo_and_breadcrumb
  • DIV#breadcrumb
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
FORM

class: new_page

id: new_page
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#quickly_find_something
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
INPUT-text

class: ac_input

id: page_title
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#quickly_find_something
  • FORM#new_page.new_page
 Sample #000000 #ffffff 21:1 (pass at level AAA) 255 (pass) 765 (pass)
INPUT-submit

class: submit
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#header
  • DIV#quickly_find_something
  • FORM#new_page.new_page
 Sample #000000 #f0f0f0 18.43:1 (pass at level AAA) 240 (pass) 720 (pass)
P

class: quiet
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
 Sample #666666 #ffffff 5.74:1 (AAA pass for large text; AA for regular text) 153 (pass) 459 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_404
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_705
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_952
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_713
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_948
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_377
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_76
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI.active
  • SPAN#menu_item_868
 Sample #000000 #ffffdd 20.6:1 (pass at level AAA) 251 (pass) 731 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_379
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_947
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_460
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_949
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_111
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_712
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_951
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_718
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_946
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_838
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_1079
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_811
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_61
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_378
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_380
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_91
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_117
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_950
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_903
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_115
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_273
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_828
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#navigation
  • UL#siblingmenu
  • LI
  • SPAN#menu_item_953
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
H1
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
 Sample #222222 #ffffff 15.91:1 (pass at level AAA) 221 (pass) 663 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • H1
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
DIV

id: this_is_a_beta
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
 Sample #333333 #ffeeee 11.26:1 (pass at level AAA) 192 (pass) 578 (pass)
P
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
LI
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
  • UL
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
H2
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
 Sample #222222 #ffffff 15.91:1 (pass at level AAA) 221 (pass) 663 (pass)
STRONG
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
  • P
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#page_content
  • P
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#content
  • DIV#original_url
  • H2
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
P

class: quiet
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
  • DIV#about_this_site
 Sample #666666 #ffffff 5.74:1 (AAA pass for large text; AA for regular text) 153 (pass) 459 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
  • DIV#about_this_site
  • P.quiet
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
  • UL#footer_navigation
  • LI
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
LI
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
  • UL#footer_navigation
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
DIV

id: other_formats
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
 Sample #333333 #ffffff 12.63:1 (pass at level AAA) 204 (pass) 612 (pass)
A
  • HTML
  • BODY.blueprint
  • DIV.container
  • DIV#footer
  • DIV#other_formats
  • UL
  • LI
 Sample #0066ff #ffffff 4.83:1 (AAA pass for large text; AA for regular text) 166 (pass) 408 (fail)
Luminosity Contrast Thresholds
Success Criterion Level Minimum Ratio Large Print Minimum Ratio
1.4.3 Contrast (Minimum) AA 4.5:1 3:1
1.4.6 Contrast (Enhanced) AAA 7:1 4.5:1
AERT Thresholds
Difference in brightness Greater than 125
Difference in color Greater than 500

Comments (0)

You don't have permission to comment on this page.

Printable version