Introduction

Welcome to my project showcase. This project aims to enhance accessibility and user experience for all users. The Background Contrast and Font Size Selection page is thoughtfully designed to offer a variety of options, ensuring an inclusive and user-friendly experience.

Contrast Options

Users can choose from different contrast options to enhance readability, including:

Font Size Options

Additionally, users can select from small, medium, and large font sizes to suit their personal preferences and visual needs. This ensures the page caters to a wide range of users, making it an inclusive and user-friendly experience.

Screenshots or Preview

web page of a white background and a black text. The page is titled 'Background Contrast and Font size selection page.' It has two sections. The first section is titled 'Choose Your Contrast' and shows four contrast options: white, black, and blue rectangles with a blue border. The second section is titled 'You Did Great! Now Select Your Font Size' and displays three font size options: Small, Medium, and Large, all with black text and blue borders
Web page with a black background and white text. The page is titled 'Background Contrast and Font size selection page.' It has two sections. The first section is titled 'Choose Your Contrast' and shows four contrast options: white, black, and blue rectangles with a blue border. The second section is titled 'You Did Great! Now Select Your Font Size' and displays three font size options: Small, Medium, and Large, all with white text and blue borders
Web page with a black background and yellow text. The page is titled 'Background Contrast and Font size selection page.' It has two sections. The first section is titled 'Choose Your Contrast' and shows four contrast options: white, black, and blue rectangles with a blue border. The second section is titled 'You Did Great! Now Select Your Font Size' and displays three font size options: Small, Medium, and Large, all with yellow text and blue borders
Web page with a blue background and yellow text. The page is titled 'Background Contrast and Font size selection page.' It has two sections. The first section is titled 'Choose Your Contrast' and shows four contrast options: white, black, and blue rectangles with a blue border. The second section is titled 'You Did Great! Now Select Your Font Size' and displays three font size options: Small, Medium, and Large, all with yellow text and blue borders

Key Features

Code Snippet

// JavaScript function to set contrast
function setContrast(option) {
    switch (option) {
        case 1:
            document.body.style.backgroundColor = 'white';
            document.body.style.color = 'black';
            break;
        case 2:
            document.body.style.backgroundColor = 'black';
            document.body.style.color = 'white';
            break;
        case 3:
            document.body.style.backgroundColor = 'black';
            document.body.style.color = 'gold';
            break;
        case 4:
            document.body.style.backgroundColor = 'blue';
            document.body.style.color = 'gold';
            break;
    }
    localStorage.setItem('contrast-selection', option);
}