How do I make material design components such as button ripples and shadows compliant with AAA accessibility? - material-design

I'm planning on my website having material-inspired design without using a framework. How can I use such iconic material components such as the button ripple and elevation without sacrificing AAA color contrast?
Shadow
I want to use the .gmd-2 material shadow from this codepen. It uses two shadows, one with the color rgba(0, 0, 0, 0.16), and the other with the color rgba(0, 0, 0, 0.23), both of which fail AA with a white background, according to https://contrast-ratio.com.
Ripple
I want to use the Waves light ripple, which is the ripple color rgba(255,255,255,0.4), which doesn't pass AAA even in black.

You should measure color contrast of text but not shadows of blocks.
Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.
https://dequeuniversity.com/rules/axe/3.1/color-contrast?application=AxeChrome
Use right accessibility testing tools https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

Related

How to change color of a rectangle element in Enterprise architect Whiteboard diagram

I am new to EA, and for my high level layered architecture, I just want to draw a whiteboard diagram with few rectangles. I want to change the colour of the rectangles, However, the right click context pop for colour is not changing my rectangle colour. Any inputs on this is soo appreciated...Thanks
You can't change it. Those elements are created with the help of shape scripts. If you take for example the rounded rectangle you see that they don't regard the user color settings. You can either manipulate the shape scripts in the Whiteboard MDG yourself or ask Sparx for a new feature. (If you want to see a change in your lifetime I'd recommend the first.)
Alternatively just draw a Boundary which can be set to Solid which enables color filling.

How to transform a Grayscale background SVG, to white or black colors

I have Gray SVG icons next to each Menu item (inherited from another project) and displaied as background.
I need to show them black or white but I don't how to achieve this.
As backgrounds I can't use fill css property. I tried with filter:brightness(100) to make them white but I loose anti-aliasing (and analogue with filter:brightness(0) to make them black).
Mask has still serious compatibility issues (e.g. Firefox does not allow external svg).
I tried also to import them as data-uri with LESS feature, but it was unuseful, so.... any suggestion?

color blending with GDI+

I am refering to a older question saying color blending with GDI+
Using GDI+ with Windows Forms, I want to be able to draw with a pen and blend color based on the destination pixel color.
For example, if I draw a line and it passes over black pixels, I want it to be a lighter color (like white for example) so that it's visible. When that same line passes over white pixels, it should be a darker color (black for example) so that it's still clearly visible.
the answers says to use a color matrix for transformation
so i started implementing it..
My image is present in raw data format in rgb48
Gdiplus::Bitmap image(input.width,input.height,input.width*6,PixelFormat48bppRGB,(unsigned char*)rgb48);
Gdiplus::Image *images= image.GetThumbnailImage(input.width,input.height);
Gdiplus::TextureBrush brush(images);
Gdiplus::Pen pen(&brush);
Gdiplus::ColorMatrix matrix={
-1.0f,0.0f,0.0f,0.0f,0.0f,
0.0f,-1.0f,0.0f,0.0f,0.0f,
0.0f,0.0f,-1.0f,0.0f,0.0f,
0.0f,0.0f,0.0f,1.0f,0.0f,
1.0f,1.0f,1.0f,0.0f,1.0f,
};
Gdiplus::Graphics gfx(&image1);
Gdiplus::ImageAttributes imageAttr;
imageAttr.SetColorMatrix(&matrix);
gfx.DrawImage(images,Gdiplus::Rect(0,0,input.width,input.height),0,0,1024,1024,Gdiplus::UnitPixel,&imageAttr);
I am not getting what i expect..Can some one help me in finding the mistake i m doing.
You can use the alpha component of a color to specify transparency, so that colors can be combined. However, if you want the combination to be something other than the alpha blend, you must draw the pixels yourself. You could first draw into a transparent bitmap, then render that onto the destination pixel by pixel.

How computers draw transparency?

In real life, transparency (or opacity) can be explained in a "simple" way by how much an object can reflect light, or how much of it pass through. So if an object is transparent light pass trough it, reflect on whatever is behind it and the light get back to us.
How computers simulate this behavior? I mean, we as developers, have many abstractions and APIs to set alpha levels and opacities of our pixels but how computers translates this into a bitmap to the screen?
What I think is happening: Both back and front colors are "combined" to result in a third color and this is then draw to screen. Eg: transparent white over back red on screen will be painted as pink!
Yes, you have it right. The "back" color is combined with the "front" color in proportion to the opacity of the front color.
For a single color channel, e.g. red, with opacity from 0 to 1:
new = old * (1 - opacity) + front * opacity

How can I get background color of a layer in Photoshop?

I have a design in .psd format. It is using various layers and diffrent settings for opacity. I am using Photoshop CS3. How can I get background color of the layer. One way is to use in-build Color Palette utility but that doesn't suits me. I want a way by which I can get exact Brush that is used for the background. It may or may not have Gradients.
Not that this is programming related, but use the eye-dropper tool.
http://www.ehow.com/how_2193268_use-eye-dropper-tool-photoshop.html
Once the color is placed into your "foreground color" box, click the box and it will show you the color in RGB, Hex, and pretty much any other way you can display a color value.

Resources