Juicy Studio: Colour Contrast Analyser

Summary of Failures
Failures
Luminosity Contrast Ratio3
Colour Contrast Results (Luminosity Contrast Ratio)
ElementParent NodesSampleColourBackgroundLuminosity Contrast Ratio
A
  • HTML.js
  • BODY
  • DIV#skiplink
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#campus_links
Sample#333333#ffffff12.63:1 (pass at level AAA)
LI
  • HTML.js
  • BODY
  • DIV#campus_links
  • UL
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#campus_links
  • UL
  • LI
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H1

class: forScreenReaders

  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#logo_uofm
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
SPAN
  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#search_area
  • UL#search_nav
  • LI#btn_myu
  • A
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
SPAN
  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#search_area
  • UL#search_nav
  • LI#btn_email
  • A
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
LABEL
  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#search_area
  • FORM#search
Sample#333333#ffcc338.39:1 (pass at level AAA)
INPUT-text

id: search_text

  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#search_area
  • FORM#search
Sample#333333#ffffff12.63:1 (pass at level AAA)
INPUT-submit

id: search_submit

  • HTML.js
  • BODY
  • DIV#headerUofM
  • DIV.container
  • DIV#search_area
  • FORM#search
Sample#7a0019#ffcc337.57:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • SECTION#twcd
  • DIV.container
  • DIV.row
Sample#ffffff#28101017.92:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • SECTION#twcd
  • DIV.container
  • DIV.row
  • P
Sample#fcbf49#28101010.83:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • SECTION#twcd
  • DIV.container
  • DIV.row
  • DIV#twcd_copy
Sample#ffffff#28101017.92:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • SECTION#twcd
  • DIV.container
  • DIV.row
  • DIV#twcd_cta
Sample#ffffff#28101017.92:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • SECTION#twcd
  • DIV.container
  • DIV.row
  • DIV#twcd_cta
  • P
Sample#fcbf49#28101010.83:1 (pass at level AAA)
A

id: nav-toggle

  • HTML.js
  • BODY
  • DIV#nav_spacer
  • DIV#nav_wrap
Sample#ffffff#ffffff1:1 (fail)
A
  • HTML.js
  • BODY
  • DIV#nav_spacer
  • DIV#nav_wrap
  • DIV#nav.container.closed
  • UL
  • LI
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H4
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_2.container
  • DIV.caption-wrap
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_2.container
  • DIV.caption-wrap
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_2.container
  • DIV.caption-wrap
  • H5
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H4
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_1.container
  • DIV.caption-wrap
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_1.container
  • DIV.caption-wrap
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI
  • DIV.flex-caption.caption_1.container
  • DIV.caption-wrap
  • H5
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H4
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI.flex-active-slide
  • DIV.flex-caption.caption_3.container
  • DIV.caption-wrap
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI.flex-active-slide
  • DIV.flex-caption.caption_3.container
  • DIV.caption-wrap
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.slides
  • LI.flex-active-slide
  • DIV.flex-caption.caption_3.container
  • DIV.caption-wrap
  • H5
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P

class: counter

  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: current-slide

  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • P.counter
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: total-slides

  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • P.counter
Sample#333333#ffffff12.63:1 (pass at level AAA)
A

class: flex-prev

  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.flex-direction-nav
  • LI
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
A

class: flex-next

  • HTML.js
  • BODY
  • DIV.flex-container
  • DIV#main.flexslider
  • UL.flex-direction-nav
  • LI
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
DIV

class: forScreenReaders

  • HTML.js
  • BODY
Sample#333333#ffffff12.63:1 (pass at level AAA)
H2
  • HTML.js
  • BODY
  • DIV#admissions_wrap
  • DIV#admissions_rotator
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P

class: forScreenReaders

  • HTML.js
  • BODY
  • DIV#admissions_wrap
  • DIV#admissions_rotator
  • DIV#admiss.flexslider
  • DIV.flex-viewport
  • UL.slides
  • LI.admiss
  • DIV.skew_box
  • A
Sample#0000ee#ffffff9.4:1 (pass at level AAA)
A

class: flex-prev flex-disabled

  • HTML.js
  • BODY
  • DIV#admissions_wrap
  • DIV#admissions_rotator
  • DIV#admiss.flexslider
  • UL.flex-direction-nav
  • LI
Sample#333333#ffffff12.63:1 (pass at level AAA)
A

class: flex-next

  • HTML.js
  • BODY
  • DIV#admissions_wrap
  • DIV#admissions_rotator
  • DIV#admiss.flexslider
  • UL.flex-direction-nav
  • LI
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#apply
  • DIV.container
  • DIV.cta
  • H2.unskew_10
Sample#ffffff#8c26338.61:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#apply
  • DIV.container
  • DIV.intro
Sample#333333#ffffff12.63:1 (pass at level AAA)
STRONG
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#apply
  • DIV.container
  • DIV.intro
  • P
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H2
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.colleges
  • UL
  • LI
Sample#333333#e5d7c98.96:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.schools
  • UL
  • LI
Sample#333333#f1f1f111.19:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.bonus_links
  • UL
  • LI.left
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.bonus_links
  • UL
  • LI.center
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.bonus_links
  • UL
  • LI.right
Sample#333333#ffffff12.63:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.explore_cta
Sample#333333#e5d7c98.96:1 (pass at level AAA)
A

class: explore_umd_lightbox

id: open_lightbox

  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#schools
  • DIV.row
  • DIV.explore_cta
  • P
Sample#7a0019#e5d7c98.09:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#donate
  • DIV.container
  • DIV.cta
  • H2.unskew_10
Sample#ffffff#8c26338.61:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#donate
  • DIV.container
  • DIV.intro
Sample#333333#ffffff12.63:1 (pass at level AAA)
STRONG
  • HTML.js
  • BODY
  • DIV#explore_umd
  • DIV#donate
  • DIV.container
  • DIV.intro
  • P
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H2
  • HTML.js
  • BODY
  • DIV#resources
  • DIV.container
  • DIV.left
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#resources
  • DIV.container
  • UL.resource_img
  • LI
  • A
  • DIV.resource_bkgnd
Sample#ffffff#7a001911.4:1 (pass at level AAA)
H2
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#news
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#news
  • DIV#news_feed
  • DIV.row
  • DIV.news_story
  • A
  • DIV.posted
Sample#ffffff#ffffff1:1 (fail)
H3
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#news
  • DIV#news_feed
  • DIV.row
  • DIV.news_story
  • A
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#news
  • DIV.news_all
  • P
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H2
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV#events_feed
  • A
  • DIV.calendar_entry.
  • DIV.date
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
SPAN

class: day

  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV#events_feed
  • A
  • DIV.calendar_entry.
  • DIV.date
  • P
Sample#fcbf49#ffffff1.66:1 (fail)
H3
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV#events_feed
  • A
  • DIV.calendar_entry.
  • DIV.details
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P

class: location

  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV#events_feed
  • A
  • DIV.calendar_entry.
  • DIV.details
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: time

  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV#events_feed
  • A
  • DIV.calendar_entry.
  • DIV.details
  • P.location
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV.news_all
  • P.float-left
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • DIV#news_wrap
  • DIV#news_inner
  • DIV#events
  • DIV.news_all
  • P
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
H2

class: forScreenReaders

  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.container
  • DIV.links
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.container
  • DIV.links
  • UL
  • LI
Sample#333333#ffffff12.63:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.container
  • DIV.twcd_footer
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: social_sprites

  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.social_wrap
  • DIV.social
  • P
  • A#facebook
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: social_sprites

  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.social_wrap
  • DIV.social
  • P
  • A#twitter
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: social_sprites

  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.social_wrap
  • DIV.social
  • P
  • A#flickr
Sample#333333#ffffff12.63:1 (pass at level AAA)
SPAN

class: social_sprites

  • HTML.js
  • BODY
  • FOOTER
  • DIV#upper-footer
  • DIV.social_wrap
  • DIV.social
  • P
  • A#youtube
Sample#333333#ffffff12.63:1 (pass at level AAA)
LI
  • HTML.js
  • BODY
  • FOOTER
  • DIV#lower_footer
  • DIV.container
  • DIV#footer_inner
  • UL.copyright
Sample#333333#ffffff12.63:1 (pass at level AAA)
LI
  • HTML.js
  • BODY
  • FOOTER
  • DIV#lower_footer
  • DIV.container
  • DIV#footer_right
  • UL.footer_links
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • FOOTER
  • DIV#lower_footer
  • DIV.container
  • DIV#footer_right
  • UL.footer_links
  • LI
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
P
  • HTML.js
  • BODY
  • FOOTER
  • DIV#lower_footer
  • DIV#poll
Sample#333333#ffffff12.63:1 (pass at level AAA)
A
  • HTML.js
  • BODY
  • FOOTER
  • DIV#lower_footer
  • DIV#poll
  • P
Sample#7a0019#ffffff11.4:1 (pass at level AAA)
Luminosity Contrast Thresholds
Success CriterionLevelMinimum RatioLarge Print Minimum Ratio
1.4.3 Contrast (Minimum)AA4.5:13:1
1.4.6 Contrast (Enhanced)AAA7:14.5:1