COIS 2430 Assignment #1 Question #1 - Colors Your company is in the process of redesigning its public website. You've been assigned to choose the accessible colour palettes for potential

new designs. Two different designs will be created for evaluation by management; both must include the company's primary brand colour, #822E81. You are not responsible for the design, just creating and testing the palettes of colours be used. Management likes having options, so they'd like you to provide four additional colours for each palette. Additionally, using pure-black or pure-white for primary text- or background-colours can be quite hard on the eyes. So instead, you should select an almost-black or an almost-white to use in their place. Closely inspect an existing dark- mode site that you like for ideas: you may find that many use (for example) a super dark purple in-place of #000, or a very faint baby blue instead of #FFF. In summary, each palette will have five main palette colours (the primary brand colour, #822E81, plus four more of your choosing), as well as black-ish and/or white-ish colours, also of your choosing. The designs Design #1 The first design will have traditional light and dark modes. All five of your palette colours will be accent colours. It is practically impossible to create a single set of accent colours that will work against both white and black, so you will probably need to create two different palettes for this design. Both palettes should have a similar colour story, even if they aren't the exact same colours: the shades in your Dark Mode palette should be variants of those in your Light Mode palette. Design #2 The second design will be a more colourful one. Your primary background colour should be one of your main palette colours, with the other four acting as accents. This design shouldn't be subtle: none of your palette colours should be a variation of black, white, or gray (you can still include your black-ish/white-ish for text, though). Part 0 - Pick your colours Starting with the primary brand colour, pick out a palette that you like for each of the above designs. Note that you should have two different palettes (plus one "variation" of the first one to support light/dark mode). It's fine if your black-ish and white-ish are the same for both. Also note that these choices aren't set in stone: as mentioned further down the page, you may have to adjust your selections as you test their accessibility. Part 1 - Plan how to use your colours For each palette, identify: • A primary background colour to be used for the main section of each page. This colour will take most of the page, so don't make it too jarring! • A secondary background colour to be used for some page sections like headers, footers, and asides, as well as controls like buttons, etc. • A primary text colour for each of backgrounds. These colours must be accessible for use as normal text on their respective background. • Two other secondary text colours for use on things like hyperlinks or headers. Both of these colours must be accessible for normal text against your primary background, but only one of them needs to work on your secondary background. Any remaining colours in your palette would be the ones used solely for accents like borders, so they don't need to be tested for accessibility. Part 2 - Test your colours' accessibility and adjust Once you've planned how to use your colours, you should test each background and text colour combination for accessibility. Two background colours times three text colours should result in six tests for each palette. You will probably need to adjust some of your colours to meet the WCAG accessibility guidelines as you test them. You only need to meet the standard for AA normal-sized text. Keep in mind that not all your tests need to pass; you just have to have enough accessible combinations to meet the requirements above. Note: I find this tool (https://jxnblk.github.io/colorable/demos/text/) to be the most useful for testing and adjusting colours at the same time because I find it easier to make smaller adjustments in hue, saturation, and lightness (particularly the last two) without drastically changing the colour, and because you can see the ratio change in real-time. Your final tests should be done with the WebAIM's contrast checker (https://webaim.org/r esources/contrastchecker), however. You should screen capture the results of each test, including the failed ones. Your screenshot should look like this (try to keep them reasonably small): Contrast Checker Home > Resources > Contrast Checker Foreground Color #0000FF Lightness Contrast Ratio 8.59:1 permalink Normal Text WCAG AA: Pass WCAG AAA: Pass Large Text WCAG AA: Pass WCAG AAA: Pass Background Color #FFFFFF Lightness The five boxing wizards jump quickly. The five boxing wizards jump quickly. Graphical Objects and User Interface Components WCAG AA: Pass Text Input You will compile all your screenshots into your final submission document, and each one should be labelled with what that colour combination is intended for. Details about the submission process will be available in a few days. Question #2 Your company is building a web page for a special event they will host. The marketing department has provided the image attached to the dropbox on Blackboard. Your job is to turn this rather large image into a set of responsive images for different sized screens: 360px wide, with the image taking up the entire width of the screen. 1440px wide, with the image restricted to approximately two-thirds (33) of the screen. 2560px wide, with the image taking up about half (½) of the screen. First, create images in the appropriate sizes. Then, you should take each image and consider making it more web-friendly. Keep track of what changes you make to each image and how it affects the filesize (so include the before and after filesize for each of your changes). Next, create the HTML to display the images responsively. You don't need to include an actual webpage (and definitely no CSS), just the HTML to display the image. You will need to use the picture element for different formats, and srcset within that for different sizes. You will receive a bonus mark if you also include Art Direction for the smallest screen size. You will include your various images, details about what you changed (see above), and your HTML to display the images in your submission document. Question #3 For the final question, you will research an HTML element (or set of simpler related elements) from the list below that we don't have time to discuss in the course content. You must start by reading the relevant section of the HTML Standard(https://html.spec.w hatwg.org/multipage/#toc-semantics) for the element(s) you choose (you may need to follow a link or two within the document to get the full picture). You should then also consider what the MDN (https://developer.mozilla.org/en-US/docs/Web/HTML) has to say. Using mainly these two resources, make a simple webpage dedicated to your element(s). Write a few short paragraphs about your choice, covering things like: • What the element should be used for (semantics; what does this element mean?) • What the element should not be used for (again, semantically; what are some potential pitfalls or common misuses of this element?)