background preloader

JuicyStudio

JuicyStudio
Colour Contrast The old Accessibility Evaluation and Repair Tools (AERT) suggested algorithm for determining colour contrast now directs here. The AERT algorithm was never a recommendation, and WCAG 2.0's luminosity contrast algorithm is recommended instead. Success Criterion 1.4.3 of WCAG 2.0 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Analyse Luminosity Contrast Ratio Related:  Accessibilité

Ocawa validateur Essential bookmarks for web-designers For more useful and inspiring content related to design and web-development visit Smashing Magazine — a magazine dedicated to web design and development. If you think this web-project is useful, please consider making a donation using the button "Donate via PayPal". Support the further development of the project! updated/SaturdayJuly26th Although the "pocket edition" of Web-Dev-Bookmarks wasn't officially released one week ego, it has already been tagged, linked and bookmarked by thousands of users. Over the last few months the amount of links on this page was constantly growing, making the list less readable and more overflooded. updated/MondaySeptember19th Since the project "Web-Dev-Bookmarks" was slashdotted, digged, furled, mentioned on Del.icio.us, Stumble Upon, 456bereastreet, CSS Beauty, Lifehacker, remarked by Cameron Moll, Jeffrey Zeldman and linked on 1688 pages, it was literally overflooded with visitors and traffic. Every donation counts.

Color Contrast Checker You are here: Home > Resources > Color Contrast Checker <p><strong>This tool requires Javascript.</strong></p> Normal Text WCAG AA: Pass WCAG AAA: Pass The five boxing wizards jump quickly. Large Text Explanation Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Beautiful Word Clouds CSS List Style Wizard CSS List Style Wizard Welcome to the CSS List Style Wizard! Use this wizard to experiment with list styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. List Style Notes You can use any list style property for either ordered or unordered lists. Use cascading to apply style properties to sub-levels of the list. For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see HTML and CSS Table Border Style Wizard. CSS Image Bullets As you may notice in the wizard, when using images as the bullet, the bullet does not line up to the text in an attractive way. As a work-around, you can properly align bullet images via the background image CSS property. You can see the style sheet and example below. More CSS Wizards Recommended Books Dynamic HTML: The Definitive Reference (2nd Edition)

W3C comprendre WCAG 2.0 Résumé Ce document, « Comprendre les WCAG 2.0 » est un guide essentiel à la compréhension et l'utilisation de la version 2.0 des Règles pour l'accessibilité des contenus Web (WCAG) (en anglais) [WCAG20] et fait partie d'un ensemble de documents les accompagnant. Notez que le contenu de ce document est de nature informative (il fournit des orientations) et non de nature normative (il n'établit pas d'exigences de conformité aux WCAG 2.0). Consulter la Présentation des Règles pour l'accessibilité des contenus Web (WCAG) (en anglais) pour une introduction aux WCAG, aux documents techniques d'accompagnement et au matériel éducatif. Les WCAG 2.0 établissent un ensemble de critères de succès visant à définir la conformité aux règles des WCAG 2.0. Ce document présente des techniques précises pour satisfaire à chaque critère de succès.

collection of 40 CSS layouts All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id="extra">Extra stuff</div> <div id="footer">Footer</div> </div> It's almost minimal, apart from an extra wrapper around the content. Talking about CSS: each of the layouts uses float and in most of the cases negative margins. The CSS of the examples, which is embedded in both online and download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout.

Contrast Analyser & Accessibility About the Colour Contrast Analyser This native application (available for both Windows and Mac) allows you to evaluate the color visibility and contrast of foreground/background color combinations. It provides an initial pass/fail assessment against WCAG 2.0 color contrast success criteria. In addition, the Colour Contrast Analyser provides functionality to simulate certain visual conditions such as dichromatic color blindness (protanopia, deuteranopia, tritanopia) and cataracts. Note: the image simulation features are currently not available in the Mac version. Details The Color Contrast Analyser was developed to facilitate the assessment of color combinations against WCAG 2.0: The Colour Contrast Analyser uses the following formula to determine contrast: where R, G and B are defined as: and RsRGB, GsRGB, and BsRGB are defined as: RsRGB = R8bit/255GsRGB = G8bit/255BsRGB = B8bit/255 Versions Windows Mac Acknowledgements Terms of use The Colour Contrast Analyser is freeware.

RGB-to-Hex Conversion RGB-to-Hex Conversion Question: How do I convert RGB values of a color to a hexadecimal string? Answer: The RGB-to-hexadecimal converter algorithm is simple: make sure that your values are in the range 0...255, convert R, G, B to hex strings, and then concatenate the three hex strings together. Convert RGB to Hex color values here: function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } Notes: The script parses the input R, G, B values as integers using the standard function parseInt(string,10); the second, optional argument 10 specifies that the value must be parsed as a decimal number. RGB/hex codes for named colors supported in most browsers are listed below: See also:

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Time passed, and at the beginning of the 2000s, when progressive Web designers started to seek alternatives to JavaScript-based rollover menus (with onMouseOver and onMouseOut effects), sprites saw a renaissance in Web development. In 2004, Dave Shea suggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video games. Where Are CSS Sprites Used?

Player vidéo Depuis 2007, la scolarisation des élèves en situation de handicap en milieu ordinaire est une priorité du Ministère de l’éducation nationale Depuis 2007, la scolarisation des élèves en situation de handicap en milieu ordinaire est une priorité du Ministère de l’éducation nationale L’équipe du site.tv propose une version accessible du site.tv répondant aux recommandations internationales d’accessibilité sur Internet. (en savoir plus sur les règles d’accessibilité). Lesite.tv pour tous permet aux personnes en situation de handicap moteur, cognitif, auditif ou visuel de naviguer sur lesite.tv de manière adaptée, à l’aide par exemple, d’un lecteur d’écran relié à une synthèse vocale. Voir la présentation du site.tv pour tous Lesite.tv et le Ministère de l’éducation nationale ont décidé de mettre à disposition en open source (Licence GPL -> GNU General Public License), le player du site.tv à l’ensemble des internautes. Les internautes auront donc :

20 Rules Of Smart And Successful Web-development 20 Rules Of Smart And Successful Web-development » Mar 20, 03:45 PM 12 months. 12 months already… A year ago I have started to improve my web-development skills and to share the knowledge I had with the visitors of my blog. The funny thing is that as I was just realizing my ideas in the Web, I didn’t think about getting the page popular, tweaking its position in search engines or finding potential clients on the Web. Over the last 12 months, developing few web-sites, I’ve found out some interesting concepts and ideas which helped me to improve the quality of web design and information I present on my web-pages. So, basically, “20 Rules Of Smart And Successful Web-development” is my personal pick of the main ideas and concepts, which might improve the quality and popularity of your web-sites and provide a good foundation for successful development in the future. 1. Denny Carl from Devblog.de has placed Google Adsense Text Block in the right column.

Related:  colour