Search completed in 0.88 seconds.
Color contrast - Accessibility
the color
contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
... when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following
contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... having good color
contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low
contrast, and have trouble differentiating between similar colors.
...And 10 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-
contrast css media feature is a microsoft extension that describes whether the application is being displayed in high
contrast mode, and with what color variation.
... high
contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... syntax the -ms-high-
contrast media feature is specified as one of the following values.
...And 9 more matches
prefers-contrast - CSS: Cascading Style Sheets
the prefers-
contrast css media feature is used to detect if the user has requested that the web content is presented with a higher (or lower)
contrast.
... more indicates that user has notified the system that they prefer an interface that has a higher level of
contrast.
... less indicates that user has notified the system that they prefer an interface that has a lower level of
contrast.
...And 2 more matches
-ms-high-contrast-adjust - Archive of obsolete content
the -ms-high-
contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high
contrast mode.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto indicates the applicable css properties will be adjusted as expected when the system is in high
contrast mode.
... none indicates the applicable css properties will not be adjusted when the system is in high
contrast mode.
... remarks the -ms-high-
contrast-adjust property works with the -ms-high-
contrast media feature.
contrast() - CSS: Cascading Style Sheets
the
contrast() css function adjusts the
contrast of the input image.
... syntax
contrast(amount) parameters amount the
contrast of the result, specified as a <number> or a <percentage>.
... a value under 100% decreases the
contrast, while a value over 100% increases it.
... examples setting
contrast using numbers and percentages
contrast(0) /* completely gray */
contrast(65%) /* 65%
contrast */
contrast(1) /* no effect */
contrast(200%) /* double
contrast */ specifications specification status filter effects module level 1the definition of '
contrast()' in that specification.
Web Accessibility: Understanding Colors and Luminance - Accessibility
understaning color, luminance, and saturation is important in meeting wcag 2 accessibility guidelines in terms of ensuring enough color
contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.
...(see understanding success criterion 1.4.3:
contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer.
... color,
contrast, and luminance are among the most central and critical concepts to creating accessible web content with color.
...And 25 more matches
Accessibility Inspector - Firefox Developer Tools
the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues
contrast — check for issues with visual
contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected.
... simulate the accessibility inspector offers (as of firefox 70), a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as
contrast sensitivity loss.
...the role and name of the item will be shown in a small information bar along with color
contrast information if appropriate.
...And 9 more matches
Perceivable - Accessibility
the classic example is color (both color
contrast and use of color to convey instructions), but it applies in other situations too.
... see color and color
contrast and multiple labels.
... 1.4.3 minimum
contrast (aa) the color
contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a
contrast ratio of at least 4.5:1.
...And 6 more matches
filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter:
contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter:
contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter...
...ight:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; }
contrast() the
contrast() function adjusts the
contrast of the input image.
...values of an amount over 100% are allowed, providing results with more
contrast.
...And 6 more matches
CSS and JavaScript accessibility best practices - Learn web development
your text color should
contrast well with your background color.
... color and color
contrast when choosing a color scheme for your website, make sure that the text (foreground) color
contrasts well with the background color.
... there is an easy way to check whether your
contrast is large enough to not cause problems.
...And 5 more matches
Accessibility Information for Web Authors - Accessibility
color
contrast analyzer by juicy studio "
contrast is the perceived difference between two adjacent colors.
... (...)
contrast is extremely important in web design." wheel of color: pump up the
contrast, robert hess, msdn "for this year's list of worst design mistakes, (...) i asked readers of my newsletter to nominate the usability problems they found the most irritating.
... (...) about one-third complained about low
contrast between text and background." top ten web design mistakes of 2005: 1.
...And 5 more matches
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high
contrast mode the -ms-high-
contrast css media feature is a microsoft extension that describes whether the application is being displayed in high
contrast mode, and with what color variation.
... this will help not only users with low vision and
contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.
... syntax the -ms-high-
contrast media feature is specified as one of the following values.
...And 5 more matches
Handling common accessibility problems - Learn web development
color and color
contrast when choosing a color scheme for your website, you should make sure that the text (foreground) color
contrasts well with the background color.
...use a tool like webaim's color
contrast checker to check whether your scheme is
contrasting enough.
... note: a high
contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.
...And 4 more matches
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and 10 default theme aero basic (windows 7, 8) windows classic (windows 7) high
contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes directory containing 4 sub-directories: shared linux osx windows the shared directories contain styles sh...
... high
contrast mode content area on windows high
contrast mode, in the content area, gecko does some automatic color adjustments regarding page colors.
... part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-
contrast mode.
...And 3 more matches
Web accessibility for seizures and physical reactions - Accessibility
certain visual patterns, especially stripes of
contrasting colors.
... prefers-
contrast from w3c's draft document, media queries level 5 section on prefers-
contrast: "the prefers-
contrast media feature is used to detect if the user has requested the system increase or decrease the amount of
contrast between adjacent colors.
... for example, many users have difficulty reading text that has a small difference in
contrast to the text background and would prefer a larger
contrast." sometimes there can be such a thing as too much
contrast; a halo effect around text can occur in such situations and actually reduce legibility.
...And 3 more matches
::placeholder - CSS: Cascading Style Sheets
syntax ::placeholder accessibility concerns color
contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.
... it is important to ensure that the
contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.
... color
contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values.
...And 3 more matches
XUL accessibility guidelines - Archive of obsolete content
do this by changing system display settings to an accessible theme (such as the high-
contrast theme on windows, available via left-alt + left-shift + printscreen).
...verify that the layout and
contrast is sufficient to distinguish interactive elements one from another and from static portions of the application.
... color color alone is not used to convey meaning and sufficient
contrast exists between font color and background color.
...And 2 more matches
Mozilla's Section 508 Compliance
(g) applications shall not override user selected
contrast and color selections and other individual display attributes.
...the default theme, classic, uses the operating system's font and color
contrast settings.
... when the windows "high
contrast theme" is used classic, and thus the system look and feel, is automatically selected.
...And 2 more matches
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as
contrast sensitivity loss.
...
contrast sensitivity loss can be caused by cataracts, glaucoma, diabetic retinopathy, and other disorders of the retina; it can be age-related, congenital, or due to an injury.
... in the simulate menu, you can choose one option at a time from the following list: none — choose this to return to normal display protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue)
contrast loss these simulations are not completely medically accurate.
...And 2 more matches
Accessibility documentation index - Accessibility
83 accessibility and spacial patterns accessibility, braille, patterns, photosensitive seizures nasa conducted research on the perception of color, and found that luminance
contrast mattered greatly as to how they were perceived.
... 98 perceivable accessibility, principle 1, wcag, web content accessibility guidelines,
contrast, different presentation, text alternatives, time-based media this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... 99 color
contrast accessibility, wcag,
contrast, perceivable the color
contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
...And 2 more matches
How can we design for all types of users? - Learn web development
dig deeper color
contrast to keep your text readable, use a text color that
contrasts well with the background color.
... let's download and install the paciello group's colour
contrast analyser.
... note: alternatively you can find a number of
contrast checkers online, such as webaim's color
contrast checker.
... for instance, let's test the colors on this page and see how we fare in the colour
contrast analyser: the luminosity
contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.
Accessibility information for UI designers and developers
color enough
contrast ensure there is enough
contrast between foreground and background colors.
...calculating this ratio is easiest done with a tool, for example lea verou's
contrast ratio.
... see also: understanding sc 1.4.3:
contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus styles to see where they are on the page.
...placeholders are best avoided for this, as they are often too low in
contrast.
CanvasRenderingContext2D.filter - Web APIs
contrast() a css <percentage>.
... adjusts the
contrast of the drawing.
...this example applies the
contrast, sepia, and drop-shadow filters to a photo of a gecko.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = '
contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
Accessibility and Spacial Patterns - Accessibility
spatial localization nasa conducted research on the perception of color, and found that luminance
contrast mattered greatly as to how they were perceived.
... symbols which have the same luminance as their background are perceptually less securely located in space and time than are symbols with higher luminance
contrast.
... they tend to "float" visually or be "captured" by adjacent symbols with high luminance-
contrast.
... text and padding wcag standards for
contrast perception do not take into account the effect of padding.
::selection - CSS: Cascading Style Sheets
if overridden, it is important to ensure that the
contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.
... color
contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors.
... to meet current web content accessibility guidelines (wcag), text content must have a
contrast ratio of 4.5:1, or 3:1 for larger text such as headings.
... (wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with
contrast or conflicting colors.
...common design practice is to try to find the sweet spot where there's just enough
contrast that the text is crisp and readable but not enough
contrast to become harsh for the eyes.
...if the
contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your
contrast is too high, the user may find your site garish and unpleasant to look at.
... color, backgrounds,
contrast, and printing what looks good on screen may look very different on paper.
Accessible Toolkit Checklist
some low vision users will be running your software with high
contrast or large font themes.
...ne mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high
contrast checkbox is set (in accessibility control panel, spi_gethigh
contrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
... the high
contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight color where possible for item selection, but never use that exact color in more than 1 place at a time, otherwise screen reader will read everything with that color whenever highlight changes pay attention to spi_getcaretwidth for the correct width of the caret pay attention to 'route mouse pointer to default button' setting it's possible that the user wants mnemonics hidden except when the alt key is pressed.
Index - Web APIs
it allows them to react to such a change, for example by changing the color
contrast of the user interface (ui) or by changing the exposure necessary to take a picture.
...in
contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer.
...this is in
contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
background-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the
contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color
contrast ratio is determined by comparing the luminance of the text and background color values.
... webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements.
color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the
contrast is optimized for reading on white paper.
... formal definition initial valueeconomyapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax economy | exact examples preserving low
contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text.
... css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more
contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the
contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color
contrast ratio is determined by comparing the luminosity of the text and background color values.
... webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements.
<filter-function> - CSS: Cascading Style Sheets
contrast() increases or decreases the image's
contrast.
... html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>
contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px...
...tlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === '
contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min...
opacity - CSS: Cascading Style Sheets
for example: background: rgba(0, 0, 0, 0.4); accessibility concerns if text opacity is adjusted, it is important to ensure that the
contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color
contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values.
... webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div>...
outline-color - CSS: Cascading Style Sheets
if the color of the outline is adjusted, it is important to ensure that the
contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
... color
contrast ratio is determined by comparing the luminosity of the text and background color values.
... webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
scrollbar-color - CSS: Cascading Style Sheets
accessibility concerns when using scrollbar-color property with specific color values, authors should ensure the specified colors have enough
contrast between them.
... for keyword values, uas should ensure the colors they use have enough
contrast.
... see techniques for wcag 2.0: g183: using a
contrast ratio of 3:1.
text-decoration-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the
contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color
contrast ratio is determined by comparing the luminosity of the text and background color values.
... webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuecurrentcolorapplies toall elements.
Index - Archive of obsolete content
in
contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
... 2103 -ms-high-
contrast-adjust css, css property, non-standard, reference, recipe:css-property the -ms-high-
contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high
contrast mode.
A XUL Bestiary - Archive of obsolete content
in
contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...by
contrast, the skin is just the css and referenced graphics for a xul file, the localization strings are just a dtd, and the content is just the xul.
Create Your Own Firefox Background Theme - Archive of obsolete content
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft
contrast images and gradients work best; highly detailed images will compete with the browser ui.
... image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft
contrast images and gradients work best; highly detailed images will compete with the browser ui.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
157 forbidden header name fetch, glossary, http, headers, forbidden a forbidden header name is the name of any http header that cannot be modified programmatically; specifically, an http request header name (in
contrast with a forbidden response header name).
...the mobile-first approach
contrasts with the older approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes.
HTML: A good basis for accessibility - Learn web development
link text color, like all text, has to be significantly different from the background color (a 4.5:1
contrast).
...with a minimum
contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5
contrast between all those state colors and the background color.
HTML: A good basis for accessibility - Learn web development
link text color, like all text, has to be significantly different from the background color (a 4.5:1
contrast).
...with a minimum
contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5
contrast between all those state colors and the background color.
Introduction to the server side - Learn web development
by
contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests.
... in
contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an http server is really hard to do from scratch in say python, but python web frameworks like django provide one out of the box, along with other very useful tools.
Software accessibility: Where are we today?
magnification enlarges the screen's contents: for those with low vision, it may suffice to use a larger font, a built-in high
contrast theme, or even just an an extra large screen.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high
contrast, or green on blue for low
contrast.
Experimental features in Firefox
nightly 77 no developer edition 77 no beta 77 no release 77 no preference name layout.css.grid-template-masonry-value.enabled media feature: prefers-
contrast the prefers-
contrast media feature is used to detect whether the user has specified a preference for higher (or lower)
contrast in the presentation of web content.
... nightly 80 no developer edition 80 no beta 80 no release 80 no preference name layout.css.prefers-
contrast.enabled apis graphics: canvas, webgl, and webgpu interface: offscreencanvas the offscreencanvas interface provides a canvas that can be rendered offscreen.
Inspect and select colors - Firefox Developer Tools
if you click on the color sample, you'll see a color picker popup, enabling you to change the color: if the color is a foreground color, the color picker tells you whether its
contrast with the background color meets accessibility guidelines.
... hovering the mouse over the
contrast message gives a more detailed explanation.
History.pushState() - Web APIs
in
contrast, setting window.location keeps you at the same document only if you modify only the hash.
...in
contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo.
Working with the History API - Web APIs
in
contrast, setting window.location keeps you at the same document only if you modify only the hash.
...in
contrast, setting window.location = "#foo"; creates a new history entry only if the current hash isn't #foo.
Node.textContent - Web APIs
in
contrast, innertext only shows “human-readable” elements.
...in
contrast, innertext is aware of styling and won’t return the text of “hidden” elements.
:focus - CSS: Cascading Style Sheets
wcag 2.1 sc 1.4.11 non-text
contrast requires that the visual focus indicator be at least 3 to 1.
...tips for designing useful and usable focus indicators :focus { outline: none; } never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass wcag 2.1 sc 1.4.11 non-text
contrast.
@media - CSS: Cascading Style Sheets
prefers-
contrast detects if the user has requested the system increase or decrease the amount of
contrast between adjacent colors added in media queries level 5.
... adds prefers-reduced-motion, prefers-reduced-transparency, prefers-
contrast, and prefers-color-scheme media features.
Microsoft CSS extensions - CSS: Cascading Style Sheets
-ms-accelerator -ms-block-progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-
contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-li...
... -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-
contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter:
contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filte...
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <
contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<
contrast()> =
contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
cursor - CSS: Cascading Style Sheets
progress the program is busy in the background, but the user can still interact with the interface (in
contrast to wait).
... wait the program is busy, and the user can't interact with the interface (in
contrast to progress).
image-rendering - CSS: Cascading Style Sheets
crisp-edges the image must be scaled with an algorithm that preserves
contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process.
...ed" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-
contrast; image-rendering: crisp-edges; } result specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
color
contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on.
...(large text is defined as 18.66px and bold or larger, or 24px or larger.) webaim: color
contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os.
PATCH - HTTP
contrast this with put; which is a complete representation of a resource.
...
contrast this with put; which is always idempotent.
Introduction - JavaScript
in
contrast to java's compile-time system of classes built by declarations, javascript supports a runtime system based on a small number of data types representing numeric, boolean, and string values.
... in
contrast, javascript descends in spirit from a line of smaller, dynamically typed languages such as hypertalk and dbase.
context-menu - Archive of obsolete content
if you run this add-on you'll see that it always logs "body", even if you click on a paragraph element inside the page: info: contextmenu-example: clicked: body by
contrast, this add-on uses the pagecontext: var script = "self.on('click', function (node, data) {" + " console.log('clicked: ' + node.nodename);" + "});"; var cm = require("sdk/context-menu"); cm.item({ label: "body context", context: cm.pagecontext(), contentscript: script }); it will log the name of the actual node clicked: info: contextmenu-example: clicked: p th...
Index - Archive of obsolete content
in
contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
valueNumber - Archive of obsolete content
« xul reference valuenumber type: number in
contrast to the value property which holds a string representation, the valuenumber property is a number containing the current value of the number box.
The Joy of XUL - Archive of obsolete content
key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in
contrast with dhtml which is intended for developing web pages.
textbox - Archive of obsolete content
valuenumber type: number in
contrast to the value property which holds a string representation, the valuenumber property is a number containing the current value of the number box.
::-ms-browse - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style ...
::-ms-check - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius borde...
::-ms-clear - Archive of obsolete content
-ms-high-
contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width b...
::-ms-expand - Archive of obsolete content
-ms-high-
contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top...
::-ms-fill-lower - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
::-ms-fill - Archive of obsolete content
animation-name background-clip, background-color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...
::-ms-reveal - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-reveal specifications not part of any specification.
::-ms-thumb - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...
::-ms-track - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and ...
::-ms-value - Archive of obsolete content
order-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-
contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-color: transparent; color: inherit; } specifications not part of any...
CSS - Archive of obsolete content
d to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-
contrast-adjustthe -ms-high-
contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high
contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word.
Track the score and win - Game development
compare your code the latest code looks (and works) like this, in case you want to compare and
contrast it with yours: exercise: add more points per brick hit, print out the number of collected points in the end game alert box.
Accessible multimedia - Learn web development
you can however make sure that such an app has good enough color
contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible.
Backgrounds and borders - Learn web development
accessibility considerations with backgrounds when placing text on top of a background image or color, you should take care that you have enough
contrast for the text to be legible for your visitors.
Advanced form styling - Learn web development
kit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-
contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; backgroun...
Index - Learn web development
5 css and javascript accessibility best practices accessibility, article, css, codingscripting, guide, javascript, learn, color,
contrast, hiding, unobtrusive we hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding css and javascript use on web pages.
Multimedia: Images - Learn web development
progressive jpegs, in
contrast to normal jpegs, render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
Introduction to client-side frameworks - Learn web development
by
contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it.
Links and Resources
color
contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color
contrast, sufficient brightness difference by comparing background and foreground (text) colors.
Lightweight themes
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft
contrast images and gradients work best; highly detailed images will compete with the browser ui.
Infallible memory allocation
this is in
contrast to a traditional, fallible memory allocator that can return null indicating that the request failed.
DMD
150; 272 x 591; 256 x 6,017; 240 x 1,372; 224 x 93; 208 x 488; 192 x 1,919; 176 x 18,903; 160 x 1,754; 144 x 5,041; 128 x 36,709; 112 x 5,571; 96 x 6,280; 80 x 40,738; 64 x 37,925; 48 x 78,392; 32 x 136,199; 16 x 31,001; 8 x 4,706 3.78% of the heap (10.24% cumulative) 21.24% of unreported (57.53% cumulative) allocated at { #01: (no stack trace recorded due to --stacks=partial) } } in
contrast, stack traces are always recorded when a block is reported, which means you can end up with records like this where the allocation point is unknown but the reporting point is known: once-reported { 104,491 blocks in heap block record 13 of 4,689 10,392,000 bytes (10,392,000 requested / 0 slop) individual block sizes: 512 x 124; 256 x 242; 192 x 813; 128 x 54,664; 64 x 48,648 1.35% of the...
Rhino documentation
try this at http://archive.is/ssvxq ) an article comparing and
contrasting rhino and jython.
Index
in
contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls.
Tracing JIT
in
contrast, a single native instruction is called a nins, and is depicted in red in the schematic diagram.
Self-hosted builtins in SpiderMonkey
in
contrast to function.prototype.call, this syntax makes it impossible for other code to interfere and gets compiled to bytecode that doesn't have any overhead compared to a normal function invocation.
JSGetObjectOps
in
contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls.
JSObjectOps.getProperty
contrast jsclass.getproperty, jsclass.setproperty, and jsclass.delproperty, which are hooks called during property accesses and don't have to implement any of that.
Building the WebLock UI
in this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in
contrast to the <vbox/>, which orients its children vertically).
mozIStorageAsyncStatement
in
contrast, mozistoragestatement may need to acquire the primitives and consequently can cause the main thread to lock for extended intervals while the asynchronous thread performs some long-running operation.
Mozilla
this is in
contrast to a traditional, fallible memory allocator that can return null indicating that the request failed.
Streams - Plugins
in
contrast, for streams produced by the plug-in, the plug-in calls the plug-in api methods npp_newstream, npp_write, and npp_destroystream to create a stream, push data into it, and delete it.
Index - Firefox Developer Tools
4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as
contrast sensitivity loss.
Ambient Light Events - Web APIs
it allows them to react to such a change, for example by changing the color
contrast of the user interface (ui) or by changing the exposure necessary to take a picture.
Compositing example - Web APIs
pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always get a positive value.', 'like difference, but with lower
contrast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].rever...
IDBFactory.deleteDatabase() - Web APIs
note that attempting to delete a database that doesn't exist does not throw an exception, in
contrast to idbdatabase.deleteobjectstore(), which does throw an exception if the named object store does not exist.
install - Web APIs
in
contrast to startsoftwareupdate, install allows you to do multiple installs with the same trigger and provides a unified user experience for the multiple installs.
LocalFileSystem - Web APIs
in
contrast, temporary storage is automatically granted without any user permission, but it can be expunged by the browser at any time.
Media Source API - Web APIs
this is in direct
contrast with previous streaming solutions that required expensive licenses for proprietary non-standard client/server protocol implementations.
OfflineAudioContext - Web APIs
in
contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer.
Payment Request API - Web APIs
a browser could also adjust the font size or color
contrast of the payment sheet, making it more comfortable for the user to make a payment.
Web Audio API - Web APIs
in
contrast with a standard audiocontext, an offlineaudiocontext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
Window: load event - Web APIs
this is in
contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
Using the group role - Accessibility
the group role is used to identify a set of user interface objects which, in
contrast with a region, are not intended to be included in a table of contents or a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page.
ARIA: document role - Accessibility
in
contrast to the article role, the document role does not have any relation to other elements with a document role, it merely has a relationship to the containing composit widget.
Mobile accessibility checklist - Accessibility
colour colour
contrast must comply with wcag 2.1 aa level requirements:
contrast ratio of 4.5:1 for normal text (less than 18 point or 14 point bold.)
contrast ratio of 3:1 for large text (at least 18 point or 14 point bold.) information conveyed via colour must be also available by other means too (underlined text for links, etc.) visibility content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility.
:dir() - CSS: Cascading Style Sheets
(similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in
contrast, :dir() will match the value calculated by the user agent, even if inherited.
font-stretch - CSS: Cascading Style Sheets
accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low
contrast color ratio.
font-weight - CSS: Cascading Style Sheets
accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low
contrast color ratio.
CSS reference - CSS: Cascading Style Sheets
@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontent
contrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<f...
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: difference; } exclusion the final color is similar to difference, but with less
contrast.
caret-color - CSS: Cascading Style Sheets
this is generally currentcolor, but the user agent may choose a different color to ensure good visibility and
contrast with the surrounding content, taking into account the value of currentcolor, the background, shadows, and other factors.
display - CSS: Cascading Style Sheets
below that, we have a select menu that allows you to apply different display values to the containers, allowing you to compare and
contrast how the different values affect the element's layout, and that of their children.
font-optical-sizing - CSS: Cascading Style Sheets
when optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more
contrast between thicker and thinner strokes.
font-weight - CSS: Cascading Style Sheets
n update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low
contrast color ratio.
word-break - CSS: Cascading Style Sheets
note: in
contrast to word-break: break-word and overflow-wrap: break-word (see overflow-wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
Constraint validation - Developer guides
(this is typically done by the user-agent when determining which of the css pseudo-classes, :valid or :invalid, applies.) in
contrast, the reportvalidity() method reports any constraint failures to the user.
HTML5 Parser - Developer guides
--> in
contrast, the following code contains two scripts with unbalanced sub-trees, which causes speculative parsing to fail and therefore the time to parse the document is longer.
Using HTML sections and outlines - Developer guides
by
contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content.
Mobile Web Development - Developer guides
if you don't do that, at least make sure that the default background
contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule.
HTML attribute: rel - HTML: Hypertext Markup Language
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="high
contrast.css" title="high
contrast"> with an hreflang attribute that differs from the document language, it indicates a translation.
Keyed collections - JavaScript
the main differences to the set object are: in
contrast to sets, weaksets are collections of objects only, and not of arbitrary values of any type.
Memory Management - JavaScript
in
contrast, javascript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection).
Function.length - JavaScript
by
contrast, arguments.length is local to a function and provides the number of arguments actually passed to the function.
Number.isSafeInteger() - JavaScript
in
contrast, 253 is not a safe integer: it can be exactly represented in ieee-754, but the integer 253 + 1 can't be directly represented in ieee-754 but instead rounds to 253 under round-to-nearest and round-to-zero rounding.
Promise.prototype.catch() - JavaScript
this is considered good practice in
contrast to throwing strings; otherwise, the part doing the catching would have to perform checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.
Symbol.for() - JavaScript
description in
contrast to symbol(), the symbol.for() function creates a symbol available in a global symbol registry list.
WeakMap - JavaScript
by
contrast, native weakmaps hold "weak" references to key objects, which means that they do not prevent garbage collection in case there would be no other reference to the key object.
block - JavaScript
block scoping rules with let, const or function declaration in strict mode by
contrast, identifiers declared with let and const do have block scope: let x = 1; { let x = 2; } console.log(x); // logs 1 the x = 2 is limited in scope to the block in which it was defined.
continue - JavaScript
description in
contrast to the break statement, continue does not terminate the execution of the loop entirely: instead, in a while loop, it jumps back to the condition.
Patterns - SVG: Scalable Vector Graphics
this
contrasts with the "userspaceonuse" system, where if the object changes the size, the pattern would stay the same and just repeat itself more times to fill the box.